html {
height: 100%;
}
/* Data safety: conflicts, diagnostics and recoverable archives */
.conflict-center,.system-health{display:grid;gap:14px}.conflict-card{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface)}.conflict-card>header,.conflict-card>footer,.system-health-flags{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.conflict-card>header div{display:grid;gap:3px}.conflict-card>header small,.system-health td small{display:block;color:var(--muted);margin-top:3px}.conflict-table{width:100%;border-collapse:collapse;font-size:12px}.conflict-table th,.conflict-table td{padding:8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;overflow-wrap:anywhere}.conflict-table td{max-width:260px}.conflict-choice{display:flex;align-items:flex-start;gap:6px;cursor:pointer}.conflict-choice input{margin-top:3px;flex-shrink:0}.conflict-choice span{overflow-wrap:anywhere}.conflict-center-open{width:100%}.system-health-flags{justify-content:flex-start;padding:10px 0;color:var(--muted)}.system-health .module-header{margin-top:8px}
.conflict-kpi{cursor:pointer;color:inherit;text-align:left}.conflict-kpi:hover{border-color:var(--critical)}
/* Global project alert center */
.global-alert-button {
position: relative;
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--line, rgba(255,255,255,.18));
border-radius:0;
color: var(--muted);
background: transparent;
cursor: pointer;
transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.global-alert-button:hover { transform: translateY(-1px); border-color: var(--warn); color: var(--warn); }
.global-alert-button.has-alerts { border-color: color-mix(in srgb, var(--critical) 55%, var(--line)); color: var(--critical); background: color-mix(in srgb, var(--critical) 9%, transparent); }
.global-alert-icon { font-size: 15px; font-weight: 900; line-height: 1; }
#globalAlertCount {
position: absolute;
top: -7px;
right: -7px;
min-width: 19px;
height: 19px;
padding: 0 5px;
border: 2px solid var(--atlas-canvas, #0D0D0C);
border-radius:0;
color: #fff;
background: var(--critical);
font-size: 9px;
font-weight: 900;
line-height: 15px;
text-align: center;
}
.modal:has(.global-alert-center) { width: min(760px, calc(100vw - 28px)); max-height: min(820px, calc(100vh - 28px)); overflow: auto; }
.global-alert-center { display: grid; gap: 15px; }
.global-alert-summary { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px; align-items: center; padding: 15px 17px; border: 1px solid var(--line); border-radius:0; background: color-mix(in srgb, var(--surface) 92%, var(--critical) 8%); }
.global-alert-summary > strong { color: var(--ink); font-size: 28px; }
.global-alert-summary > span { color: var(--ink); font-weight: 760; }
.global-alert-summary > b { padding: 5px 9px; border-radius:0; color: var(--critical); background: color-mix(in srgb, var(--critical) 12%, transparent); font-size: 10px; text-transform: uppercase; }
.global-alert-export { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid color-mix(in srgb, var(--warn) 55%, var(--line)); background:color-mix(in srgb, var(--surface) 92%, var(--warn) 8%); }
.global-alert-export > div { display:grid; gap:3px; min-width:0; }
.global-alert-export strong { color:var(--ink); }
.global-alert-export small { color:var(--muted); line-height:1.4; }
.global-alert-list { display: grid; gap: 8px; }
.global-alert-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid var(--line); border-radius:0; background: var(--surface); }
.global-alert-row.critical { border-left: 3px solid var(--critical); }
.global-alert-row.warning { border-left: 3px solid var(--warn); }
.global-alert-severity { display: grid; place-items: center; width: 28px; height: 28px; border-radius:0; color: #fff; background: var(--warn); font-weight: 900; }
.global-alert-row.critical .global-alert-severity { background: var(--critical); }
.global-alert-row > div { min-width: 0; }
.global-alert-row small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.global-alert-row strong { display: block; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.global-alert-row p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.global-alert-empty { display: grid; justify-items: center; gap: 7px; padding: 34px 20px; border: 1px dashed var(--line); border-radius:0; text-align: center; }
.global-alert-empty > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius:0; color: #fff; background: var(--ok); font-size: 18px; }
.global-alert-empty p { max-width: 480px; margin: 0; color: var(--muted); }
.global-alert-record dl { display: grid; grid-template-columns: minmax(120px,.45fr) 1fr; margin: 18px 0 0; border-top: 1px solid var(--line); }
.global-alert-record dt,.global-alert-record dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.global-alert-record dt { color: var(--muted); }
html[data-theme="light"] .global-alert-button { border-color: var(--aryvor-border); color: #5C6C96; background: #fff; box-shadow:none; }
html[data-theme="light"] .global-alert-button.has-alerts { color: #A8615C; border-color: #A8615C; background: #fff6f7; }
html[data-theme="light"] #globalAlertCount { border-color: var(--aryvor-bg); }
html[data-theme="light"] :is(.global-alert-row,.global-alert-summary) { border-color: var(--aryvor-border); background: #fff; color: var(--aryvor-text); }
@media (max-width: 680px) {
.global-alert-row { grid-template-columns: 30px minmax(0,1fr); }
.global-alert-row > button { grid-column: 2; justify-self: start; }
.global-alert-summary { grid-template-columns: auto 1fr; }
.global-alert-summary > b { grid-column: 1 / -1; justify-self: start; }
.global-alert-export { align-items:stretch; flex-direction:column; }
.global-alert-export > button { align-self:flex-start; }
}
/* ── View help tooltip ─────────────────────────────────────────────────── */
.view-help { margin: -8px 0 14px; }
.view-help-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px 5px 8px;
border: 1px solid var(--line);
border-radius:0;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.view-help-toggle:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); color: var(--ink); }
.view-help-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.view-help-toggle[aria-expanded="true"] { border-color: color-mix(in srgb, #5C6C96 40%, var(--line)); color: #5C6C96; background: color-mix(in srgb, #5C6C96 6%, transparent); }
.view-help-body {
margin: 10px 0 0;
padding: 16px 20px;
border: 1px solid var(--line);
border-radius:0;
background: color-mix(in srgb, var(--surface) 94%, #5C6C96 6%);
color: var(--ink);
font-size: 13px;
line-height: 1.65;
animation: viewHelpIn .18s ease;
}
.view-help-body ul { margin: 8px 0 4px; padding-left: 20px; }
.view-help-body li { margin: 3px 0; }
.view-help-body li::marker { color: #5C6C96; }
.view-help-body strong { font-weight: 700; }
@keyframes viewHelpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html[data-theme="light"] .view-help-toggle[aria-expanded="true"] { background: color-mix(in srgb, #5C6C96 8%, #fff); }
html[data-theme="light"] .view-help-body { background: color-mix(in srgb, #fff 92%, #5C6C96 8%); border-color: var(--aryvor-border); }
.modal:has(.page-guide-dialog) {
width:min(760px,calc(100vw - 28px));
max-height:min(820px,calc(100vh - 28px));
padding:0;
overflow:hidden;
}
.modal:has(.page-guide-dialog) .modal-head {
margin:0;
padding:18px 22px;
border-bottom:1px solid var(--line);
}
.modal:has(.page-guide-dialog) #modalBody { min-height:0; }
.page-guide-dialog { display:flex; flex-direction:column; min-height:0; max-height:min(820px,calc(100vh - 28px)); }
.page-guide-dialog > header {
display:flex;
align-items:center;
gap:14px;
padding:20px 22px 16px;
border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--aryvor-secondary) 7%,transparent);
}
.page-guide-dialog-icon {
display:grid;
place-items:center;
flex:0 0 42px;
width:42px;
height:42px;
border-radius:0;
color:#fff;
background:var(--aryvor-secondary);
font-size:20px;
font-weight:850;
}
.page-guide-dialog header strong { display:block; color:var(--ink); font-size:16px; }
.page-guide-dialog header p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.page-guide-dialog-content {
flex:1 1 auto;
min-height:0;
overflow:auto;
padding:22px 26px;
color:var(--ink);
font-size:13px;
line-height:1.7;
}
.page-guide-dialog-content > strong { display:block; margin:18px 0 8px; color:var(--aryvor-secondary); font-size:13px; }
.page-guide-dialog-content > strong:first-child { margin-top:0; font-size:15px; }
.page-guide-dialog-content ul { display:grid; gap:9px; margin:10px 0 0; padding-left:22px; }
.page-guide-dialog-content li::marker { color:var(--aryvor-secondary); font-weight:800; }
.page-guide-dialog > footer { display:flex; justify-content:flex-end; padding:14px 22px; border-top:1px solid var(--line); }
@media(max-width:620px) {
.page-guide-dialog > header { align-items:flex-start; padding:16px; }
.page-guide-dialog-content { padding:18px; }
}
/* ── Aryvor V4.3 — completion, field execution and document control ─────── */
.brand-version {
display: inline-grid;
place-items: center;
min-width: 25px;
height: 18px;
margin-left: 4px;
padding: 0 6px;
border-radius:0;
color: #fff;
background: linear-gradient(135deg, #5C6C96, #5C6C96);
font-size: 9px;
letter-spacing: .08em;
vertical-align: 2px;
}
.v3-page-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
margin-bottom: 22px;
}
.v3-page-head h2 { margin: 5px 0 6px; font-size: clamp(22px, 3vw, 34px); color: var(--ink); }
.v3-page-head p { max-width: 780px; margin: 0; color: var(--muted); line-height: 1.55; }
.v3-version { color: #5C6C96; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.v3-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.v3-kpi {
display: grid;
gap: 8px;
min-width: 0;
padding: 17px 18px;
border: 1px solid var(--line);
border-radius:0;
background: color-mix(in srgb, var(--surface) 92%, #5C6C96 8%);
box-shadow:none;
}
.v3-kpi > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.v3-kpi strong { overflow: hidden; color: var(--ink); font-size: clamp(20px, 2.6vw, 30px); text-overflow: ellipsis; white-space: nowrap; }
.v3-kpi small { color: var(--muted); }
.v3-kpi.success { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--surface) 90%, var(--ok) 10%); }
.v3-kpi.danger { border-color: color-mix(in srgb, var(--critical) 48%, var(--line)); background: color-mix(in srgb, var(--surface) 90%, var(--critical) 10%); }
.coverage-section { margin: 0 0 20px; }
.coverage-section h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.coverage-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.coverage-count.success { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.coverage-count.danger { color: var(--critical); background: color-mix(in srgb, var(--critical) 16%, transparent); }
.coverage-list { display: grid; gap: 6px; }
.coverage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface); }
.coverage-tag { display: flex; flex-direction: column; gap: 2px; font-weight: 700; color: var(--ink); }
.coverage-tag small { font-weight: 400; color: var(--muted); }
.critical-flag { color: var(--critical); font-style: normal; font-weight: 800; font-size: 10px; text-transform: uppercase; }
.document-type-inline { margin: 0 0 14px; }
.document-type-inline label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 700; }
.v3-info-banner {
display: flex;
gap: 14px;
align-items: flex-start;
margin: 0 0 20px;
padding: 15px 17px;
border: 1px solid color-mix(in srgb, #5C6C96 34%, var(--line));
border-radius:0;
background: color-mix(in srgb, var(--surface) 91%, #5C6C96 9%);
}
.v3-info-banner > span { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius:0; color: #fff; background: #5C6C96; }
.v3-info-banner strong { display: block; margin-bottom: 3px; color: var(--ink); }
.v3-info-banner p { margin: 0; color: var(--muted); line-height: 1.5; }
.v3-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.v3-system-card { overflow: hidden; border: 1px solid var(--line); border-radius:0; background: var(--surface); }
.v3-system-card > header { display: flex; justify-content: space-between; gap: 16px; padding: 17px 18px 13px; }
.v3-system-card > header > div { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 3px 9px; min-width: 0; }
.v3-system-card > header strong { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.v3-system-card > header small { grid-column: 2; color: var(--muted); }
.v3-system-card > header > b { color: var(--ink); font-size: 24px; }
.status-dot { align-self: center; width: 9px; height: 9px; border-radius:0; background: var(--warn); }
.v3-system-card.ready .status-dot { background: var(--ok); box-shadow:none; }
.v3-system-card.blocked .status-dot { background: var(--critical); box-shadow:none; }
.readiness-meter { height: 6px; overflow: hidden; background: color-mix(in srgb, var(--line) 70%, transparent); }
.readiness-meter i { display: block; height: 100%; border-radius:0; background: linear-gradient(90deg, #5C6C96, #6E8F6B); }
.v3-system-card > .readiness-meter { margin: 0 18px; border-radius:0; }
.gate-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 15px 18px; }
.gate { display: grid; gap: 3px; padding: 10px; border-radius:0; background: color-mix(in srgb, var(--soft) 85%, transparent); }
.gate span { color: var(--muted); font-size: 10px; }
.gate b { color: var(--ink); font-size: 15px; }
.gate small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.gate.done { background: color-mix(in srgb, var(--ok) 12%, var(--soft)); }
.v3-system-card > footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.v3-tabs { display: flex; gap: 4px; margin: 18px 0; padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius:0; background: color-mix(in srgb, var(--soft) 80%, transparent); }
.v3-tabs button { padding: 9px 14px; border: 0; border-radius:0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; white-space: nowrap; }
.v3-tabs button.active { color: #fff; background: #5C6C96; box-shadow:none; }
.v3-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 14px; }
.quick-filter-row { display: flex; flex-wrap: wrap; gap: 7px; }
.v3-info-inline { display: flex; gap: 10px; align-items: baseline; color: var(--muted); }
.v3-info-inline strong { color: var(--ink); font-size: 20px; }
.v3-radar-list { display: grid; gap: 9px; }
.constraint-card { display: grid; grid-template-columns: 66px minmax(0,1fr) auto; gap: 14px; align-items: stretch; border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius:0; background: var(--surface); }
.constraint-card.impact-critical { border-left-color: var(--critical); }
.constraint-card.impact-high { border-left-color: #A8615C; }
.constraint-card.impact-low { border-left-color: var(--ok); }
.constraint-score { display: grid; place-content: center; text-align: center; border-right: 1px solid var(--line); }
.constraint-score strong { color: var(--ink); font-size: 21px; }
.constraint-score small { color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.constraint-main { min-width: 0; padding: 14px 0; }
.constraint-main header { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.constraint-main header strong { flex-basis: 100%; color: var(--ink); font-size: 15px; }
.constraint-main p { margin: 6px 0 10px; color: var(--muted); }
.constraint-meta { display: flex; flex-wrap: wrap; gap: 13px; color: var(--muted); font-size: 10px; }
.constraint-actions { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 12px 14px 12px 0; }
.constraint-actions button, .temp-revision-list footer button { padding: 8px 10px; border: 1px solid var(--line); border-radius:0; color: var(--ink); background: var(--soft); }
.v3-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius:0; }
.v3-table { width: 100%; min-width: 880px; border-collapse: collapse; background: var(--surface); }
.v3-table th { padding: 11px 13px; color: var(--muted); background: color-mix(in srgb, var(--soft) 80%, transparent); font-size: 9px; letter-spacing: .09em; text-align: left; text-transform: uppercase; }
.v3-table td { padding: 13px; border-top: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.v3-table td small { display: block; margin-top: 4px; color: var(--muted); }
.offline-badge { padding: 8px 11px; border-radius:0; font-size: 10px; font-weight: 800; white-space: nowrap; }
.offline-badge.online { color: #6E8F6B; background: color-mix(in srgb, var(--ok) 16%, var(--surface)); }
.offline-badge.offline { color: #A8615C; background: color-mix(in srgb, var(--warn) 18%, var(--surface)); }
.field-status-cluster { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field-sync-badge { display: inline-flex; align-items: center; padding: 8px 11px; border: 0; border-radius: 0; font-size: 10px; font-weight: 800; white-space: nowrap; font-family: inherit; }
.field-sync-badge.is-synced { color: #6E8F6B; background: color-mix(in srgb, var(--ok) 16%, var(--surface)); }
.field-sync-badge.is-pending { color: #B99B57; background: color-mix(in srgb, var(--warn) 18%, var(--surface)); }
.field-sync-badge.is-conflict { color: #A8615C; background: color-mix(in srgb, var(--critical) 18%, var(--surface)); cursor: pointer; }
.field-sync-badge.is-conflict:hover { background: color-mix(in srgb, var(--critical) 28%, var(--surface)); }
.field-shell { max-width: 1100px; margin: 0 auto; }
.field-lookup { display: grid; grid-template-columns: minmax(180px, .32fr) minmax(0, 1fr); gap: 12px; }
.scan-button { display: grid; grid-template-columns: 42px 1fr; gap: 2px 10px; align-items: center; padding: 14px; border: 0; border-radius:0; color: #fff; text-align: left; background: linear-gradient(135deg, #5C6C96, #5C6C96); }
.scan-button > span { grid-row: 1 / span 2; display: grid; place-items: center; height: 42px; border-radius:0; background: rgba(255,255,255,.15); font-size: 23px; }
.scan-button strong { color: #fff !important; }
.scan-button small { color: rgba(255,255,255,.76); }
.field-lookup > label, .evidence-capture > label:not(.evidence-file) { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.field-lookup input, .evidence-capture textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius:0; color: var(--ink); background: var(--surface); font-size: 14px; }
.field-note-input { position: relative; }
.field-note-input textarea { padding-right: 44px; }
.field-dictate-btn { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--muted); }
.field-dictate-btn.is-listening { color: #fff; background: var(--critical); border-color: var(--critical); animation: field-dictate-pulse 1.2s ease-in-out infinite; }
@keyframes field-dictate-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.field-asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.field-asset-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius:0; color: var(--ink); text-align: left; background: var(--surface); }
.field-asset-card:hover { border-color: #5C6C96; transform: translateY(-1px); }
.field-type-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius:0; color: #5C6C96; background: color-mix(in srgb, #5C6C96 13%, var(--soft)); font-size: 20px; }
.field-asset-card > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.field-asset-card strong, .field-asset-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-asset-card small, .field-asset-card em { color: var(--muted); font-size: 10px; font-style: normal; }
.field-back { margin-bottom: 14px; border: 0; color: color-mix(in srgb, #5C6C96 58%, var(--ink)); background: transparent; font-weight: 700; }
.field-asset-hero { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 15px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius:0; background: var(--surface); }
.field-asset-hero .field-type-icon { width: 56px; height: 56px; }
.field-asset-hero h2 { margin: 3px 0; color: var(--ink); }
.field-asset-hero p, .field-asset-hero small { margin: 0; color: var(--muted); }
.field-actions { display: flex; gap: 8px; margin: 12px 0 22px; }
/* Field Mode V2 asset workspace shell (docs/SPECIFICA-FIELD-MODE-V2.md §4). */
.field-shell-locked { display: flex; flex-direction: column; gap: 14px; }
.field-asset-header { display: flex; flex-direction: column; gap: 10px; }
.field-asset-header .field-back { margin: 0; align-self: flex-start; text-align: left; }
.field-asset-header-id { display: flex; align-items: center; gap: 12px; }
.field-asset-header-id strong { display: block; text-transform: capitalize; color: var(--ink); }
.field-asset-header-id small { display: block; color: var(--muted); }
.field-asset-header-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field-asset-summary { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); }
.field-asset-summary span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.field-asset-summary strong { font-size: 14px; color: var(--ink); }
.field-tab-body { min-height: 140px; padding-bottom: 8px; }
.field-work-panel { padding: 16px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 22px; }
.field-step-group { display: flex; flex-direction: column; gap: 10px; }
.field-step-group > h4 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.field-step-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 0; background: color-mix(in srgb, var(--surface) 94%, #5C6C96 6%); }
.field-step-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.field-step-card-head strong { color: var(--ink); font-size: 13px; }
.field-step-card-head small { color: var(--muted); font-size: 11px; text-align: right; }
.field-step-card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.field-step-note { display: block; margin-top: 8px; color: #A8615C; font-size: 11px; font-weight: 650; }
.field-inline-label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; color: var(--muted); }
.field-punch-list { display: flex; flex-direction: column; gap: 6px; }
.field-punch-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); text-align: left; color: var(--ink); width: 100%; }
.field-punch-row strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.field-punch-row small { color: var(--muted); font-size: 10px; }
.field-tab-bar { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); }
.field-tab-bar button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 6px 4px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 650; }
.field-tab-bar button.active { color: #5C6C96; background: color-mix(in srgb, #5C6C96 12%, transparent); }
.field-tab-bar button small { font-size: 9px; font-weight: 700; opacity: .75; }
.field-evidence, .field-datasheets { padding: 18px; border: 1px solid var(--line); border-radius:0; background: color-mix(in srgb, var(--surface) 94%, #5C6C96 6%); }
.field-evidence h3, .field-datasheets h3 { margin: 0 0 4px; color: var(--ink); }
.field-evidence header p, .field-datasheets header p { margin: 0 0 12px; color: var(--muted); }
.field-datasheets { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.evidence-capture { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 16px 0; }
.evidence-capture > .evidence-file { flex: 0 0 180px; }
.evidence-capture > label:not(.evidence-file) { flex: 1 1 160px; min-width: 140px; }
.evidence-capture > label:has(#fieldEvidenceNote) { flex: 2 1 260px; }
.evidence-capture > button[type="submit"] { flex: 0 0 auto; }
.field-annotate-btn { flex: 0 0 auto; align-self: end; white-space: nowrap; }
.evidence-file { display: grid; place-items: center; min-height: 82px; padding: 12px; border: 1px dashed color-mix(in srgb, #5C6C96 72%, var(--line)); border-radius:0; color: color-mix(in srgb, #5C6C96 58%, var(--ink)); text-align: center; background: color-mix(in srgb, #5C6C96 8%, var(--surface)); cursor: pointer; }
.evidence-file input { display: none; }
.evidence-file span { font-size: 22px; }
.evidence-timeline { display: grid; gap: 8px; }
.evidence-timeline article { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 11px; border-radius:0; background: var(--surface); }
.evidence-timeline article > span { display: grid; place-items: center; height: 34px; border-radius:0; background: var(--soft); }
.evidence-timeline p { margin: 3px 0; color: var(--muted); }
.evidence-timeline small { color: var(--muted); }
.evidence-category-chip { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 0; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); vertical-align: middle; }
.evidence-category-chip.evidence-category-redmark { color: #A8615C; border-color: #A8615C; }
.evidence-category-chip.evidence-category-defect { color: var(--warn); border-color: var(--warn); }
.annotator { display: flex; flex-direction: column; gap: 12px; align-items: center; }
#annotatorCanvas { max-width: 100%; border: 1px solid var(--line); touch-action: none; cursor: crosshair; background: var(--surface); }
.annotator-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.qr-scanner video { width: 100%; max-height: 60vh; border-radius:0; background: #050505; }
.asbuilt-register { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.asbuilt-card { overflow: hidden; border: 1px solid var(--line); border-radius:0; background: var(--surface); }
.asbuilt-card > header { display: flex; justify-content: space-between; gap: 14px; padding: 16px; }
.document-number { color: #5C6C96; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.asbuilt-card h3 { margin: 4px 0; color: var(--ink); }
.asbuilt-card p { margin: 0; color: var(--muted); }
.revision-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: 8px; align-items: center; padding: 14px 16px; background: color-mix(in srgb, var(--soft) 82%, transparent); }
.revision-flow > div { display: grid; gap: 3px; min-width: 0; }
.revision-flow small { color: var(--muted); font-size: 9px; }
.revision-flow strong { color: var(--ink); font-size: 16px; }
.revision-flow > span { color: #5C6C96; }
.asbuilt-progress { display: flex; flex-wrap: wrap; gap: 9px; padding: 14px 16px; color: var(--muted); font-size: 10px; }
.asbuilt-progress span { padding: 6px 8px; border-radius:0; background: var(--soft); }
.asbuilt-progress b { color: var(--ink); }
.asbuilt-card > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.asbuilt-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.asbuilt-view-tools { display:flex; align-items:center; gap:9px; margin-left:auto; }
.asbuilt-search { display:flex; align-items:center; gap:7px; min-width:min(280px,48vw); padding:0 10px; border:1px solid var(--line); border-radius:0; background:var(--surface); color:var(--muted); }
.asbuilt-search input { width:100%; min-height:38px; border:0; outline:0; color:var(--ink); background:transparent; }
.asbuilt-table-wrap { margin-top:12px; }
.asbuilt-table-wrap table { min-width:980px; }
.asbuilt-table-wrap td { vertical-align:middle; }
.document-link {
padding:0; border:0; color:#5C6C96; background:transparent; font:inherit; font-weight:800; text-align:left; cursor:pointer;
text-decoration: underline; text-decoration-style: dotted; text-decoration-color: color-mix(in srgb, #5C6C96 55%, transparent);
text-underline-offset: 3px;
transition: color .12s ease, text-decoration-style .12s ease, text-decoration-color .12s ease;
}
.document-link:hover, .document-link:focus-visible {
color: var(--accent, #8496C2);
text-decoration-style: solid;
text-decoration-color: var(--accent, #8496C2);
}
.asbuilt-row-actions { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.asbuilt-row-actions .icon-action.danger { color:var(--critical); font-size:18px; }
.v3-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.v3-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.v3-form label.full, .v3-form .full { grid-column: 1 / -1; }
.v3-form input, .v3-form select, .v3-form textarea { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid var(--line); border-radius:0; color: var(--ink); background: var(--surface); }
.v3-form input[type="checkbox"], .v3-form input[type="radio"] { width: 16px; min-height: 16px; padding: 0; accent-color: var(--hot); }
.v3-form .task-choice { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 4px 6px; font-size: 13px; font-weight: 400; color: var(--ink); }
.v3-form .task-choice:hover { background: var(--soft); }
.v3-form textarea { min-height: 96px; resize: vertical; }
.password-change-form { max-width: 560px; }
.form-info-box { padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius:0; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.form-info-box strong { display:block; color:var(--ink); font-size:13px; }
.form-info-box p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.password-requirements { color:var(--muted); line-height:1.45; }
.revision-preview { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border-radius:0; background: color-mix(in srgb, #5C6C96 10%, var(--soft)); }
.revision-preview small, .revision-preview span { color: var(--muted); }
.revision-preview strong { color: #5C6C96; font-size: 22px; }
.system-detail, .document-detail { display: grid; gap: 16px; }
.system-score { display: grid; place-items: center; width: 110px; height: 110px; margin: 0 auto; border: 8px solid color-mix(in srgb, #5C6C96 25%, var(--line)); border-radius:0; }
.system-score strong { color: var(--ink); font-size: 25px; }
.system-score span { color: var(--muted); font-size: 10px; }
.gate-detail-list { display: grid; gap: 7px; }
.gate-detail-list article { display: grid; grid-template-columns: 120px minmax(0,1fr) 42px 70px; gap: 10px; align-items: center; }
.gate-detail-list small { color: var(--muted); text-align: right; }
.v3-timeline { position: relative; display: grid; gap: 0; }
.v3-timeline article { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; padding: 0 0 18px; }
.v3-timeline article i { position: relative; width: 10px; height: 10px; margin-top: 4px; border: 2px solid #5C6C96; border-radius:0; background: var(--surface); }
.v3-timeline article i::after { content:""; position:absolute; top:9px; left:2px; width:2px; height:calc(100% + 16px); background: var(--line); }
.v3-timeline article:last-child i::after { display:none; }
.v3-timeline p { margin: 3px 0; color: var(--muted); }
.v3-timeline small { color: var(--muted); }
.temp-revision-list { display: grid; gap: 9px; }
.temp-revision-list article { padding: 13px; border: 1px solid var(--line); border-radius:0; background: var(--surface); }
.temp-revision-list header { display: flex; justify-content: space-between; gap: 12px; }
.temp-revision-list header span { color: var(--muted); font-size: 10px; }
.temp-revision-list footer { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.full-width { width: 100%; }
@media (max-width: 1000px) {
.v3-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.v3-system-grid, .asbuilt-register { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.asbuilt-view-tools,.asbuilt-search { width:100%; min-width:0; }
body[data-view="field"] .panel { padding: 12px; }
body[data-view="field"] .hero-grid, body[data-view="field"] #kpiGrid { display: none; }
.v3-page-head { display: grid; gap: 12px; }
.v3-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.v3-kpi { padding: 13px; }
.v3-kpi strong { font-size: 20px; }
.gate-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.constraint-card { grid-template-columns: 52px minmax(0,1fr); }
.constraint-actions { grid-column: 2; flex-direction: row; justify-content: flex-start; padding: 0 12px 12px 0; }
.v3-toolbar { align-items: stretch; flex-direction: column; }
.field-lookup { grid-template-columns: 1fr; }
.field-asset-grid { grid-template-columns: 1fr; }
.field-asset-hero { grid-template-columns: 48px minmax(0,1fr); }
.field-asset-hero > .status-pill { grid-column: 2; width: fit-content; }
.field-actions { flex-direction: column; }
.field-shell-locked { padding-bottom: 64px; }
.field-tab-bar { position: fixed; left: 0; right: 0; bottom: 0; margin-top: 0; border-width: 1px 0 0; }
.evidence-capture { grid-template-columns: 1fr; }
.v3-form { grid-template-columns: 1fr; }
.v3-form label.full, .v3-form .full { grid-column: 1; }
.revision-flow { grid-template-columns: 1fr; }
.revision-flow > span { transform: rotate(90deg); justify-self: center; }
.gate-detail-list article { grid-template-columns: 95px minmax(0,1fr) 38px; }
.gate-detail-list small { grid-column: 2 / -1; }
}
/* Control plans — full-width workflow cards, no nested horizontal tables. */
body[data-view="templates"] .quality-plan-list {
display: grid;
grid-template-columns: minmax(0, 1fr) !important;
gap: 14px;
background: transparent !important;
min-width: 0;
}
body[data-view="templates"] .quality-plan-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius:0;
background: color-mix(in srgb, var(--panel) 95%, var(--accent) 5%);
}
body[data-view="templates"] .quality-plan-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: start;
}
body[data-view="templates"] .quality-plan-head > div:first-child,
body[data-view="templates"] .quality-step-copy,
body[data-view="templates"] .quality-step-owner { min-width: 0; }
body[data-view="templates"] .quality-plan-head h3,
body[data-view="templates"] .quality-plan-head p,
body[data-view="templates"] .quality-step-copy strong,
body[data-view="templates"] .quality-step-copy span { overflow-wrap: anywhere; }
body[data-view="templates"] .quality-plan-tools {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 7px;
max-width: 460px;
}
.quality-step-list {
display: grid;
gap: 7px;
padding: 0 16px 16px;
min-width: 0;
}
.quality-step-card {
display: grid;
grid-template-columns: 44px minmax(220px, 1fr) minmax(120px, .26fr) minmax(180px, .42fr) auto;
gap: 14px;
align-items: center;
padding: 13px 14px;
min-width: 0;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius:0;
background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.quality-step-order {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius:0;
color: var(--accent-soft, #8496C2);
background: color-mix(in srgb, var(--accent) 18%, transparent);
font-size: 12px;
font-weight: 700;
}
.quality-step-copy { display: grid; gap: 4px; }
.quality-step-copy strong { color: var(--text); font-size: 13px; line-height: 1.4; }
.quality-step-copy span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.quality-step-owner { display: grid; gap: 3px; }
.quality-step-owner small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.quality-step-owner strong { font-size: 12px; }
.quality-step-evidence { display: flex; flex-wrap: wrap; gap: 6px; }
.qc-findings-row {
display: block !important;
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0;
box-sizing: border-box;
}
.qc-findings-row #qcFindings { display: block; width: 100% !important; min-width: 100%; box-sizing: border-box; }
@media (max-width: 1050px) {
.quality-step-card { grid-template-columns: 40px minmax(0, 1fr) auto; }
.quality-step-owner, .quality-step-evidence { grid-column: 2; }
.quality-step-card > .quality-actions { grid-column: 3; grid-row: 1 / span 3; }
}
@media (max-width: 760px) {
body[data-view="templates"] .quality-plan-head { grid-template-columns: 1fr; }
body[data-view="templates"] .quality-plan-tools { justify-content: flex-start; max-width: none; }
.quality-step-card { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.quality-step-owner, .quality-step-evidence, .quality-step-card > .quality-actions { grid-column: 2; grid-row: auto; }
}
:root {
--bg: #e7e2df;
--surface: #fbfbfb;
--soft: #f0f1ef;
--line: #E3E0D5;
--ink: #181819;
--muted: #777875;
--hot: #A8615C;
--hot-soft: #F7F6F1;
--ok: #6E8F6B;
--warn: #A8615C;
--critical: #A8615C;
--blue: #5C6C96;
--shadow: 0 18px 50px rgba(35, 31, 32, 0.08);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
min-height: 100vh;
overflow: hidden;
background: var(--bg);
color: var(--ink);
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button,
input,
select {
font: inherit;
}
button,
select {
cursor: pointer;
}
.shell {
display: grid;
grid-template-columns: 72px 218px 1fr;
transition: grid-template-columns 180ms ease;
gap: 0;
height: calc(100vh - 56px);
margin: 28px;
overflow: hidden;
border-radius:0;
background: rgba(255, 255, 255, 0.44);
box-shadow:none;
}
.rail {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
padding: 22px 12px;
}
.brand,
.rail-btn,
.icon-btn,
.round,
.avatar,
.plus-btn {
display: grid;
place-items: center;
border: 0;
border-radius:0;
}
.brand {
width: 42px;
height: 42px;
background: #0d0d0e;
color: white;
font-weight: 800;
font-size: 24px;
}
.rail-btn,
.icon-btn,
.round {
width: 42px;
height: 42px;
background: white;
color: #151515;
box-shadow:none;
}
.rail-btn.active,
.rail-btn.selected,
.plus-btn {
background: var(--hot);
color: white;
}
.rail-spacer {
flex: 1;
}
.notify {
position: relative;
}
.notify::after {
content: "";
position: absolute;
top: 7px;
right: 8px;
width: 8px;
height: 8px;
border: 3px solid white;
border-radius:0;
background: var(--hot);
}
.sidebar {
min-width: 0;
position: sticky;
top: 28px;
height: calc(100vh - 56px);
overflow-y: auto;
overflow-x: hidden;
padding: 24px 14px 18px 6px;
opacity: 1;
transition: opacity 140ms ease, padding 180ms ease;
}
.shell.sidebar-collapsed {
grid-template-columns: 72px 0 1fr;
}
.shell.sidebar-collapsed .sidebar {
padding-right: 0;
padding-left: 0;
opacity: 0;
pointer-events: none;
}
.sidebar-toggle {
font-size: 28px;
line-height: 1;
transition: transform 180ms ease;
}
.mobile-menu {
display: none;
}
.shell.sidebar-collapsed .sidebar-toggle {
transform: rotate(180deg);
}
.project-title {
margin: 0 6px 18px;
}
.project-title strong {
display: block;
font-size: 17px;
}
.project-title span,
.tree .muted,
.sidebar-card span,
.sidebar-card small {
color: var(--muted);
font-size: 13px;
}
.sidebar-contractor-logo {
width: 100%;
height: 58px;
margin: 10px 0 8px;
}
.sidebar-contractor-logo[hidden] { display: none; }
.sidebar-contractor-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: left center;
}
.tree {
display: grid;
gap: 2px;
}
.tree p {
display: flex;
align-items: center;
gap: 8px;
margin: 11px 8px 3px;
color: var(--muted);
font-weight: 800;
font-size: 10px;
letter-spacing: .48px;
text-transform: uppercase;
}
.tree p::after {
content: "";
height: 1px;
flex: 1;
background: rgba(80,80,78,.12);
}
.tree p button {
display: grid;
place-items: center;
width: 18px;
height: 18px;
margin-left: -3px;
padding: 0;
border: 0;
border-radius:0;
background: transparent;
color: var(--muted);
font-size: 13px;
line-height: 1;
transition: transform 150ms ease, background 120ms ease;
}
.tree p button:hover { background: rgba(255,255,255,.75); }
.tree p.is-collapsed button { transform: rotate(-90deg); }
.tree {
/* Connector between a section title and the views under it. Squared, like
the rest of the app: a vertical trunk and a horizontal tick, no curves. */
--nav-connector: rgba(80,80,78,.28);
--nav-connector-x: 14px;
}
.tree a {
position: relative;
display: flex;
align-items: center;
gap: 8px;
min-height: 27px;
margin-left: 22px;
padding: 5px 8px;
border-radius:0;
color: #30302f;
text-decoration: none;
font-size: 12.5px;
font-weight: 650;
line-height: 1.25;
transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.tree a::before {
display: grid;
place-items: center;
width: 17px;
height: 17px;
flex: 0 0 17px;
color: #777875;
font-size: 13px;
font-weight: 500;
line-height: 1;
}
.tree a::after {
content: "";
position: absolute;
top: 0;
bottom: -2px; /* bridges the row gap so the trunk reads as one line */
left: calc(var(--nav-connector-x) - 22px);
width: 9px;
pointer-events: none;
background:
linear-gradient(var(--nav-connector), var(--nav-connector)) no-repeat left top / 1px 100%,
linear-gradient(var(--nav-connector), var(--nav-connector)) no-repeat left 50% / 100% 1px;
}
/* Last visible view of a section: the trunk stops at its tick instead of
running on into the gap before the next section. */
.tree a.nav-branch-end::after {
bottom: 0;
background:
linear-gradient(var(--nav-connector), var(--nav-connector)) no-repeat left top / 1px calc(50% + 1px),
linear-gradient(var(--nav-connector), var(--nav-connector)) no-repeat left 50% / 100% 1px;
}
.tree a:hover {
background: rgba(255,255,255,.58);
transform: translateX(1px);
}
.tree a:hover::after,
.tree a.selected::after { --nav-connector: rgba(80,80,78,.45); }
.tree a.selected {
background: white;
color: var(--hot);
box-shadow:none;
}
.tree a.selected::before { color: var(--hot); }
.tree a[data-view="dashboard"]::before { content: "▦"; }
.tree a[data-view="workqueue"]::before { content: "≡"; }
.tree a[data-view="installations"]::before { content: "◫"; }
.tree a[data-view="trays"]::before { content: "═"; }
.tree a[data-view="pulling"]::before { content: "↘"; }
.tree a[data-view="cables"]::before { content: "⑂"; }
.tree a[data-view="testing"]::before { content: "✓"; }
.tree a[data-view="grounding"]::before { content: "⏚"; }
.tree a[data-view="progress"]::before { content: "⌁"; }
.tree a[data-view="predictive"]::before { content: "⌁"; transform: rotate(-25deg); }
.tree a[data-view="topology"]::before { content: "⑂"; }
.tree a[data-view="checklists"]::before { content: "☑"; }
.tree a[data-view="energization"]::before { content: "◇"; }
.tree a[data-view="io-check"]::before { content: "⇄"; }
.tree a[data-view="itp"]::before { content: "☷"; }
.tree a[data-view="instruments"]::before { content: "⌁"; }
.tree a[data-view="punchlist"]::before { content: "!"; font-weight: 800; }
.tree a[data-view="materials"]::before { content: "▣"; }
.tree a[data-view="workforce"]::before { content: "♙"; }
.tree a[data-view="reports"]::before { content: "▤"; }
.tree a[data-view="exports"]::before { content: "↗"; }
.tree a[data-view="users"]::before { content: "◎"; }
.tree a[data-view="supervisormap"]::before { content: "⌖"; }
.tree a[data-view="imports"]::before { content: "↓"; }
.tree a[data-view="templates"]::before { content: "✎"; }
.tree a[data-view="commesse-admin"]::before { content: "⚙"; }
}
.sidebar-card {
margin: 14px 4px 0;
padding: 11px;
border-radius:0;
background: rgba(255, 255, 255, 0.7);
}
.sidebar-card strong,
.sidebar-card small {
display: block;
margin-top: 5px;
}
.sidebar-card select {
width: 100%;
margin-top: 6px;
border: 1px solid var(--line);
border-radius:0;
padding: 7px;
font-size: 12px;
background: white;
font-weight: 700;
}
.workflow-kpis {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
align-items: stretch;
}
.workflow-kpis > div {
padding: 12px;
border-radius:0;
background: white;
flex: 1 1 110px;
min-width: 110px;
}
.workflow-kpis span,
.workflow-kpis strong {
display: block;
}
.workflow-kpis span {
color: var(--muted);
font-size: 11px;
}
.workflow-kpis strong {
margin-top: 5px;
font-size: 22px;
}
.workflow-table {
min-width: 1050px;
}
.blocker-text,
.ready-text {
font-size: 12px;
font-weight: 700;
}
.blocker-text {
color: var(--critical);
}
.ready-text {
color: #6E8F6B;
}
.recommendation-list {
display: grid;
gap: 8px;
}
.recommendation-list article {
display: grid;
grid-template-columns: 24px 1fr auto;
align-items: center;
gap: 9px;
padding: 10px;
border-radius:0;
background: white;
}
.recommendation-list article > span {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius:0;
background: var(--hot-soft);
color: var(--hot);
font-size: 11px;
font-weight: 800;
}
.recommendation-list strong,
.recommendation-list small {
display: block;
}
.recommendation-list small {
margin-top: 3px;
color: var(--muted);
font-size: 11px;
}
.workflow-rule-banner {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
margin-bottom: 12px;
padding: 10px 12px;
border-left: 3px solid var(--hot);
border-radius:0;
background: white;
}
/* Predictive dashboard */
.predictive-wrap { padding: 2px 0 18px; }
.predictive-note { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:12px 14px; border:1px solid #E3E0D5; border-radius:0; background:linear-gradient(100deg,#fff7fa,#fff); }
.predictive-note > span { display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:0; background:var(--hot); color:#fff; }
.predictive-icon { width:18px; height:18px; display:block; }
.predictive-note strong,.predictive-note small { display:block; }
.predictive-note small { margin-top:3px; color:var(--muted); }
.predictive-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:10px; }
.predictive-kpis article { min-width:0; padding:16px; border:1px solid var(--line); border-radius:0; background:#fff; }
.predictive-kpis span,.predictive-kpis small { display:block; color:var(--muted); }
.predictive-kpis span { font-size:12px; font-weight:700; }
.predictive-kpis strong { display:block; margin:8px 0 5px; font-size:24px; line-height:1.05; }
.predictive-kpis small { font-size:11px; font-weight:700; }
.predictive-kpis .risk,.predictive-wrap .risk { color:var(--critical); }
.predictive-kpis .good,.predictive-wrap .good { color:#6E8F6B; }
.predictive-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:10px; }
.predictive-card { min-width:0; padding:15px; border:1px solid var(--line); border-radius:0; background:#fff; }
.predictive-card .module-header { margin-bottom:14px; }
.predictive-card .module-header h2 { font-size:15px; }
.predictive-card .module-header span { color:var(--muted); font-size:11px; font-weight:700; }
.predictive-timeline { position:relative; height:14px; margin:22px 8px 12px; border-radius:0; background:#ececeb; }
.predictive-plan { height:100%; border-radius:0; background:linear-gradient(90deg,#A8615C,#A8615C); }
.predictive-timeline i { position:absolute; top:-7px; width:3px; height:28px; border-radius:0; background:#151515; }
.predictive-dates { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; color:var(--muted); font-size:11px; }
.predictive-dates span:nth-child(2) { text-align:center; }
.predictive-dates span:last-child { text-align:right; }
.predictive-dates b { display:block; margin-bottom:2px; color:var(--ink); }
.predictive-capacity { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; }
.predictive-capacity div { padding:10px; border-radius:0; background:var(--soft); }
.predictive-capacity span,.predictive-capacity strong { display:block; }
.predictive-capacity span { margin-bottom:4px; color:var(--muted); font-size:10px; }
.predictive-capacity strong { font-size:13px; }
.cause-list { display:grid; gap:11px; }
.cause-list > div { display:grid; grid-template-columns:28px 1fr 30px; align-items:center; gap:8px; }
.cause-list > div > b { display:grid; place-items:center; width:28px; height:28px; border-radius:0; background:var(--hot-soft); color:var(--hot); }
.cause-list .predictive-cause-icon { font-size:0; }
.cause-list .predictive-cause-icon .predictive-icon { width:16px; height:16px; }
.cause-list span { font-size:11px; font-weight:700; }
.cause-list i { display:block; height:5px; margin-top:5px; overflow:hidden; border-radius:0; background:#eee; }
.cause-list em { display:block; height:100%; border-radius:0; background:var(--hot); }
.cause-list > div > strong { text-align:right; }
.predictive-risk-card { grid-column:1 / -1; }
.predictive-table { width:100%; border-collapse:collapse; font-size:12px; }
.predictive-table th { padding:8px; border-bottom:1px solid var(--line); color:var(--muted); text-align:left; font-size:10px; text-transform:uppercase; }
.predictive-table td { padding:9px 8px; border-bottom:1px solid #eeeeeb; }
.risk-pill { display:inline-block; min-width:88px; padding:4px 7px; border-radius:0; text-align:center; font-size:10px; font-weight:800; }
.risk-pill.alto,.risk-pill.high { background:#fde3e3; color:#A8615C; }
.risk-pill.medio,.risk-pill.medium { background:#fff0ce; color:#8c650d; }
.risk-pill.basso,.risk-pill.low { background:#F7F6F1; color:#6E8F6B; }
.predictive-actions { grid-column:1 / -1; }
.predictive-actions ol { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; padding:0; list-style:none; counter-reset:pred; }
.predictive-actions li { position:relative; padding:12px 12px 12px 42px; border-radius:0; background:var(--soft); counter-increment:pred; }
.predictive-actions li::before { content:counter(pred); position:absolute; left:12px; top:12px; display:grid; place-items:center; width:22px; height:22px; border-radius:0; background:var(--hot); color:#fff; font-size:11px; font-weight:800; }
.predictive-actions b,.predictive-actions span { display:block; }
.predictive-actions b { font-size:12px; }
.predictive-actions span { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.35; }
.predictive-data-warning { margin:0 0 10px; padding:10px 12px; border-left:3px solid var(--warn); background:color-mix(in srgb,var(--warn) 9%,transparent); color:var(--muted); font-size:11px; font-weight:650; }
.predictive-pace-card { grid-column:1 / -1; }
.predictive-table-wrap { overflow:auto; }
.predictive-pace-table { min-width:850px; }
.predictive-pace-table td:first-child { min-width:165px; }
.predictive-pace-table td:first-child i { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:0; }
.predictive-pace-table td strong,.predictive-pace-table td small { display:block; }
.predictive-pace-table td:first-child strong { display:inline; }
.predictive-pace-table td small { margin-top:2px; color:var(--muted); font-size:10px; }
.pace-pill { display:inline-block; padding:4px 7px; border-radius:0; white-space:nowrap; font-size:10px; font-weight:800; }
.pace-pill.good { background:#F7F6F1; color:#6E8F6B; }
.pace-pill.warning { background:#fff0ce; color:#8c650d; }
.pace-pill.risk { background:#fde3e3; color:#A8615C; }
.pace-pill.unknown { background:var(--soft); color:var(--muted); }
.predictive-curve-card svg { display:block; width:100%; min-height:210px; overflow:visible; }
.predictive-curve-card path { fill:none; stroke-width:3; }
.predictive-curve-card .curve-grid { stroke:var(--line); stroke-width:1; }
.predictive-curve-card .curve-plan { stroke:#A3A29B; stroke-dasharray:7 5; }
.predictive-curve-card .curve-actual { stroke:var(--hot); }
.predictive-curve-card .curve-forecast { stroke:#6E8F6B; stroke-dasharray:5 4; }
.predictive-curve-card circle { fill:var(--hot); }
.predictive-curve-card text { fill:var(--muted); font-size:10px; }
.curve-legend { display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:10px; font-weight:700; }
.curve-legend span::before { content:""; display:inline-block; width:18px; height:3px; margin-right:6px; vertical-align:middle; background:currentColor; }
.curve-legend .plan { color:#A3A29B; }.curve-legend .actual { color:var(--hot); }.curve-legend .forecast { color:#6E8F6B; }
.predictive-priority-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.predictive-priority-grid article { min-width:0; padding:11px; border:1px solid var(--line); border-radius:0; background:var(--soft); }
.predictive-priority-grid strong,.predictive-priority-grid small { display:block; }
.predictive-priority-grid strong { margin-top:9px; font-size:12px; }.predictive-priority-grid small { margin-top:4px; color:var(--muted); font-size:10px; }
.predictive-scenarios { grid-column:1 / -1; }
.scenario-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.scenario-grid article { padding:13px; border:1px solid var(--line); border-radius:0; background:var(--soft); }
.scenario-grid span,.scenario-grid strong,.scenario-grid small { display:block; }
.scenario-grid span,.scenario-grid small { color:var(--muted); font-size:10px; }.scenario-grid strong { margin:7px 0 4px; font-size:18px; }
@media (max-width: 980px) {
.predictive-kpis { grid-template-columns:repeat(2,1fr); }
.predictive-grid { grid-template-columns:1fr; }
.predictive-risk-card,.predictive-actions { grid-column:auto; }
.predictive-actions ol { grid-template-columns:1fr; }
.predictive-priority-grid,.scenario-grid { grid-template-columns:1fr; }
}
.workflow-rule-banner > span,
.workflow-rule-banner > b {
color: var(--muted);
font-size: 11px;
font-weight: 750;
}
.workflow-rule-banner strong,
.workflow-rule-banner small {
display: block;
}
.workflow-rule-banner small {
margin-top: 3px;
color: var(--muted);
font-size: 11px;
}
.workspace {
min-width: 0;
min-height: 0;
padding: 22px 22px 22px 0;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
padding: 0 18px;
}
.search {
display: flex;
align-items: center;
gap: 10px;
width: min(440px, 52vw);
height: 46px;
padding: 0 16px;
border-radius:0;
background: white;
box-shadow:none;
}
.search input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
}
.top-actions,
.panel-toolbar,
.crew,
.tool-buttons,
.hero-controls,
.metric-line {
display: flex;
align-items: center;
gap: 10px;
}
.top-actions select,
.hero-controls select {
min-height: 42px;
border: 0;
border-radius:0;
padding: 0 14px;
background: var(--soft);
color: #262626;
font-weight: 650;
}
.avatar {
width: 42px;
height: 42px;
background: linear-gradient(135deg, #A8615C, #A8615C 48%, #5C6C96);
color: white;
font-size: 12px;
font-weight: 800;
}
.plus-btn {
width: 46px;
height: 46px;
font-size: 27px;
line-height: 1;
}
.panel {
min-height: 0;
height: 100%;
padding: 32px;
border-radius:0;
background: rgba(255, 255, 255, 0.84);
box-shadow:none;
overflow: auto;
}
.panel-toolbar {
justify-content: space-between;
}
.chip {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius:0;
background: white;
font-size: 13px;
font-weight: 650;
}
.chip.dark {
width: 36px;
justify-content: center;
padding: 0;
background: #19191a;
color: white;
}
.chip-muted {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius:0;
font-size: 11px;
font-weight: 600;
background: var(--soft);
color: var(--muted);
border: 1px solid var(--line);
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: end;
margin-top: 32px;
}
.hero-grid.compact {
margin-top: 16px;
}
.hero-grid.compact h1 {
margin-bottom: 7px;
font-size: 34px;
line-height: 1.1;
}
.metric-line[hidden] {
display: none;
}
.eyebrow {
color: #a5a5a2;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
font-size: 12px;
}
h1 {
margin: 6px 0 14px;
color: #cbcbc8;
font-size: clamp(38px, 5vw, 66px);
line-height: 0.95;
letter-spacing: 0;
}
.metric-line span {
font-size: clamp(34px, 4vw, 48px);
font-weight: 800;
}
.metric-line b,
.metric-line strong,
.pill {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 11px;
border-radius:0;
background: var(--hot);
color: white;
font-size: 13px;
font-weight: 750;
}
.metric-line strong {
background: var(--hot-soft);
color: var(--hot);
}
.hero-copy p {
max-width: 700px;
margin: 8px 0 0;
color: var(--muted);
font-size: 14px;
}
.toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 650;
font-size: 14px;
}
.toggle input {
display: none;
}
.toggle span {
width: 36px;
height: 20px;
padding: 3px;
border-radius:0;
background: #202022;
}
.toggle span::after {
content: "";
display: block;
width: 14px;
height: 14px;
border-radius:0;
background: white;
transition: transform 160ms ease;
}
.toggle input:checked + span::after {
transform: translateX(16px);
}
.kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
gap: 8px;
margin: 14px 0 12px;
}
.kpis[hidden] {
display: none;
}
.kpi-card {
min-height: 76px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius:0;
background: white;
}
/* Dashboard KPI widgets (Ultra): drag handle + hide button overlaid on the
existing card, kept theme-agnostic (opacity/outline, not color) so they
don't fight the many per-theme .kpi-card color overrides below. */
.kpi-widget { position:relative; cursor:grab; padding-top:20px; }
.kpi-widget:active { cursor:grabbing; }
.kpi-widget-handle { position:absolute; top:4px; left:6px; font-size:11px; letter-spacing:1px; opacity:.4; pointer-events:none; }
.kpi-widget-remove { position:absolute; top:2px; right:2px; width:20px; height:20px; border:none; background:transparent; color:inherit; opacity:.5; cursor:pointer; font-size:15px; line-height:1; border-radius:4px; }
.kpi-widget-remove:hover { opacity:1; background:rgba(128,128,128,.18); }
.kpi-widget-drag-source { opacity:.4; }
.kpi-widget-drop-before { outline:2px solid var(--accent); outline-offset:-2px; }
.kpi-widget-drop-after { outline:2px solid var(--accent); outline-offset:-2px; }
/* KPI conditional formatting: target/warning thresholds map to these three
system status colors only (never a user-picked color), as a left accent
bar that survives every per-theme .kpi-card override below since it's a
box-shadow, not a property those blocks already touch. */
.kpi-card.kpi-severity-ok { box-shadow: inset 3px 0 0 var(--ok); }
.kpi-card.kpi-severity-warn { box-shadow: inset 3px 0 0 var(--warn); }
.kpi-card.kpi-severity-critical { box-shadow: inset 3px 0 0 var(--critical); }
.custom-kpi-row-hidden { opacity:.55; }
.custom-kpi-row-editing { border-color: var(--accent); }
.custom-kpi-row-actions { grid-column:2; grid-row:1/3; display:flex; gap:6px; align-items:center; }
.custom-kpi-severity-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.custom-kpi-severity-dot.kpi-severity-ok { background:var(--ok); }
.custom-kpi-severity-dot.kpi-severity-warn { background:var(--warn); }
.custom-kpi-severity-dot.kpi-severity-critical { background:var(--critical); }
.custom-kpi-form-actions { display:flex; gap:8px; align-items:center; }
.kpi-card.hot {
border-color: rgba(92,108,150, 0.65);
}
.kpi-card span,
.section-label {
color: var(--muted);
font-size: 11px;
font-weight: 650;
}
.kpi-card strong {
display: block;
margin: 5px 0 3px;
font-size: 20px;
}
.trend {
color: #252525;
font-size: 11px;
font-weight: 700;
}
.split-view,
.lower-grid {
display: grid;
gap: 12px;
}
.split-view {
grid-template-columns: 1.05fr 0.95fr;
}
.lower-grid {
grid-template-columns: 0.95fr 1.05fr;
margin-top: 12px;
}
.lower-grid[hidden] {
display: none;
}
.split-view.installation-layout {
display: block;
}
.split-view.topology-layout {
display: block;
}
.split-view.full-layout {
display: block;
}
.kpis[hidden] + .split-view {
margin-top: 18px;
}
.full-layout #primaryModule {
width: 100%;
}
.full-layout #sideModule {
display: none;
}
.split-view.workflow-layout {
display: block;
}
.split-view.drawer-open {
display: block;
}
.workflow-layout #primaryModule {
width: 100%;
}
.workflow-layout #sideModule {
display: none;
}
.topology-layout #primaryModule {
width: 100%;
}
.topology-layout #sideModule {
display: none;
}
.installation-layout #primaryModule {
width: 100%;
}
.installation-layout #sideModule {
position: fixed;
z-index: 60;
top: 28px;
right: 28px;
bottom: 28px;
width: min(390px, calc(100vw - 32px));
padding: 22px;
overflow-y: auto;
border: 1px solid var(--line);
border-radius:0;
background: var(--surface);
box-shadow:none;
transform: translateX(calc(100% + 40px));
opacity: 0;
pointer-events: none;
transition: transform 180ms ease, opacity 150ms ease;
}
.installation-layout.drawer-open #sideModule,
.split-view.drawer-open #sideModule {
display: block;
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
.split-view.drawer-open #sideModule {
position: fixed;
z-index: 60;
top: 28px;
right: 28px;
bottom: 28px;
width: min(390px, calc(100vw - 32px));
padding: 22px;
overflow-y: auto;
border: 1px solid var(--line);
border-radius:0;
background: var(--surface);
box-shadow:none;
}
.split-view.drawer-open #primaryModule {
width: 100%;
}
.assignment-drawer-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 12px;
}
.assignment-drawer-head .module-header {
margin: 0;
}
.selection-action-bar {
position: sticky;
z-index: 5;
top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
padding: 10px 12px 10px 16px;
border: 1px solid rgba(92,108,150, 0.22);
border-radius:0;
background: rgba(255, 255, 255, 0.96);
box-shadow:none;
}
.selection-action-bar span {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 12px;
}
.module-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.execution-meta { display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.25; }
.production-export-btn { white-space:nowrap; }
.work-group-manager { margin-top:12px; }
.work-group-manager .module-header { margin-bottom:10px; }
.work-group-manager .module-header h4 { margin:0; }
.work-group-manager .module-header small { display:block; margin-top:3px; color:var(--muted); }
.work-group-list { display:grid; gap:6px; margin-top:10px; }
.work-group-list > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border:1px solid var(--border); border-radius:0; }
.work-group-list strong,.work-group-list small { display:block; }
.work-group-list small { margin-top:2px; color:var(--muted); font-size:11px; }
.module {
min-width: 0;
padding: 18px;
border-radius:0;
background: var(--soft);
overflow: hidden;
}
.module-header {
position: sticky;
top: 0;
z-index: 3;
padding-top: 2px;
margin-top: -2px;
background: inherit;
}
.installation-layout .module-header,
.workflow-layout .module-header,
.topology-layout .module-header {
top: 0;
}
.installation-layout .ops-filters {
position: sticky;
top: 56px;
z-index: 2;
padding-top: 8px;
margin-top: -8px;
background: inherit;
}
.installation-layout .selection-action-bar {
top: 126px;
}
.workflow-layout .workflow-rule-banner,
.topology-layout .topology-legend {
position: sticky;
top: 56px;
z-index: 2;
margin-top: 0;
background: inherit;
}
.module h2 {
margin: 0 0 14px;
font-size: 18px;
}
.module-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.filter-btn {
min-height: 36px;
border: 1px solid var(--line);
border-radius:0;
padding: 0 12px;
background: white;
font-weight: 650;
}
.primary-action {
min-height: 42px;
border: 0;
border-radius:0;
padding: 0 16px;
background: var(--hot);
color: white;
font-weight: 750;
}
.primary-action.small { min-height:30px; padding:0 10px; font-size:12px; border-radius:0; }
/* Disabled buttons carry the same colors as active ones in every theme
block below (several use !important), so color alone never reads as
"can't click this" — opacity does, regardless of which block wins. */
.filter-btn:disabled,
.filter-btn[disabled],
.primary-action:disabled,
.primary-action[disabled] {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
}
.primary-action.ghost {
border: 1px solid var(--line);
background: white;
color: var(--ink);
}
.list {
display: grid;
gap: 8px;
}
.list-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 10px 12px;
border-radius:0;
background: rgba(255, 255, 255, 0.8);
}
.list-row strong,
.list-row span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-row small {
color: var(--muted);
}
.status {
display: inline-flex;
align-items: center;
min-height: 25px;
padding: 0 9px;
border-radius:0;
background: white;
color: var(--muted);
font-size: 12px;
font-weight: 750;
}
.status.done {
background: rgba(92,108,150, 0.15);
color: #6E8F6B;
}
.status.progress {
background: rgba(92,108,150, 0.15);
color: #5C6C96;
}
.status.critical,
.status.delayed {
background: rgba(168,97,92, 0.13);
color: #A8615C;
}
.status.loto {
background: rgba(122,92,150, 0.15);
color: #7A5C96;
}
.status.open {
background: rgba(168,97,92, 0.18);
color: #956915;
}
.work-grid,
.import-grid,
.code-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.work-card,
.import-card,
.code-card,
.detail-card {
display: grid;
gap: 12px;
min-height: 120px;
padding: 14px;
border-radius:0;
background: rgba(255, 255, 255, 0.82);
}
.work-card small,
.import-card small,
.code-card code,
.detail-card small,
td small {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 12px;
}
.work-card p {
margin: 0;
color: var(--muted);
font-size: 13px;
}
.progress-control,
.segmented,
.card-foot,
.action-stack {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.progress-control input {
flex: 1;
min-width: 120px;
accent-color: var(--hot);
}
.progress-control button,
.segmented button,
.checklist-items button {
min-height: 30px;
border: 1px solid var(--line);
border-radius:0;
padding: 0 10px;
background: white;
font-weight: 700;
font-size: 12px;
}
.segmented .active-segment,
.checklist-items .checked {
border-color: var(--hot);
background: var(--hot-soft);
color: var(--hot);
}
.checklist-items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.card-foot {
justify-content: space-between;
}
.form-stack {
display: grid;
gap: 10px;
}
.form-stack input,
.form-stack select,
.form-stack textarea,
.mini-input,
.mini-select {
width: 100%;
min-height: 40px;
border: 1px solid var(--line);
border-radius:0;
padding: 0 12px;
background: white;
color: var(--ink);
}
.form-stack textarea {
min-height: 90px;
padding-top: 10px;
resize: vertical;
}
.ops-filters {
display: grid;
grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
gap: 10px;
align-items: end;
margin-bottom: 12px;
}
.installation-toolbar {
grid-template-columns: minmax(190px, 240px) minmax(220px, 280px) auto;
gap: 16px;
padding: 12px 0 14px;
}
.installation-toolbar > label,
.installation-toolbar > .filter-result-control {
display: grid;
grid-template-rows: 16px 40px;
gap: 6px;
align-self: stretch;
}
.filter-result-control > span {
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.installation-toolbar select,
.installation-toolbar .filter-result {
min-height: 40px;
height: 40px;
}
.installation-toolbar .filter-result {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
}
.installation-toolbar .filter-result strong {
font-size: 18px;
}
.installation-toolbar .filter-result small {
color: var(--muted);
font-size: 11px;
}
.cable-filters {
grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
}
.ops-filters label,
.assignment-panel label {
display: grid;
gap: 6px;
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.ops-filters select,
.assignment-panel select,
.assignment-panel input,
.assignment-panel textarea {
width: 100%;
min-height: 38px;
border: 1px solid var(--line);
border-radius:0;
padding: 0 10px;
background: white;
color: var(--ink);
}
.ops-filters select[multiple] {
min-height: 118px;
padding: 8px 10px;
}
.filter-result {
display: grid;
min-height: 58px;
align-content: center;
padding: 8px 14px;
border-radius:0;
background: white;
}
.filter-result strong {
font-size: 20px;
}
.filter-result span {
color: var(--muted);
font-size: 11px;
}
.assignment-panel {
display: grid;
gap: 10px;
}
.task-assignment-fieldset {
display: grid;
gap: 6px;
margin: 0;
border: 1px solid var(--line);
border-radius:0;
padding: 10px;
background: white;
}
.task-assignment-fieldset legend {
padding: 0 5px;
color: var(--muted);
font-size: 12px;
font-weight: 750;
}
.assignment-panel .task-choice {
display: flex;
grid-template-columns: none;
align-items: center;
gap: 9px;
min-height: 34px;
padding: 4px 6px;
border-radius:0;
color: var(--ink);
font-size: 13px;
}
.assignment-panel .task-choice:hover {
background: var(--soft);
}
.assignment-panel .task-choice input {
width: 16px;
min-height: 16px;
accent-color: var(--hot);
}
.assignment-panel textarea {
min-height: 80px;
padding-top: 9px;
resize: vertical;
}
.crew-summary {
display: grid;
gap: 8px;
}
.crew-summary div {
padding: 10px 12px;
border-radius:0;
background: white;
}
.crew-summary small {
display: block;
margin-top: 4px;
color: var(--muted);
}
.mini-input,
.mini-select {
max-width: 130px;
min-height: 34px;
}
.table-wrap {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: auto;
max-height: 58vh;
contain: inline-size;
border-radius:0;
background: white;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
table-layout: fixed;
}
thead th {
position: sticky;
top: 0;
z-index: 2;
background: white;
}
.th-controls {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
width: 100%;
}
.ops-table {
width: max-content;
min-width: 100%;
}
.ops-table th:first-child,
.ops-table td:first-child {
width: 52px;
text-align: center;
}
.ops-table .equipment-group-row td {
position: sticky;
left: 0;
padding: 10px 14px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: #f2f0ef;
color: var(--ink);
text-align: left;
}
.equipment-row td {
transition: background-color 140ms ease, box-shadow 140ms ease;
}
.equipment-row.is-selected td {
background: #fff0f4;
box-shadow:none;
}
.equipment-row.is-selected td:first-child {
box-shadow:none;
}
.equipment-row input[type="checkbox"] {
accent-color: var(--hot);
}
.workflow-row td {
transition: background-color 140ms ease, box-shadow 140ms ease;
}
.workflow-row.is-selected td {
background: #fff0f4;
box-shadow:none;
}
.workflow-row.is-selected td:first-child {
box-shadow:none;
}
.workflow-row input[type="checkbox"] {
accent-color: var(--hot);
}
.tray-installation-table {
min-width: 2050px;
}
.tray-check-cell .mini-select {
display: block;
width: 100%;
max-width: none;
}
.tray-check-cell textarea {
width: 100%;
min-height: 44px;
margin-top: 6px;
border: 1px solid var(--line);
border-radius:0;
padding: 7px 8px;
background: white;
color: var(--ink);
font: inherit;
font-size: 11px;
resize: vertical;
}
.tray-check-cell textarea[readonly] {
background: #f2f1f0;
color: var(--muted);
}
.supplier-badge {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 9px;
border: 1px solid var(--line);
border-radius:0;
background: white;
font-size: 11px;
font-weight: 750;
}
.supplier-badge.customer {
border-color: rgba(92,108,150, 0.3);
background: rgba(92,108,150, 0.08);
color: #5C6C96;
}
.supplier-badge.contractor {
border-color: rgba(92,108,150, 0.25);
background: rgba(92,108,150, 0.07);
color: #A8615C;
}
.equipment-group-row span {
margin-left: 10px;
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.work-step-cell {
min-width: 145px;
}
.status-select.done {
border-color: rgba(92,108,150, 0.5);
background: rgba(92,108,150, 0.08);
}
.status-select.progress {
border-color: rgba(92,108,150, 0.5);
background: rgba(92,108,150, 0.08);
}
.status-select.yes {
border-color: rgba(92,108,150, 0.5);
background: rgba(92,108,150, 0.09);
}
.status-select.no {
border-color: rgba(92,108,150, 0.35);
background: rgba(92,108,150, 0.06);
}
.status-select.na {
border-color: rgba(107, 103, 101, 0.35);
background: #f2f1f0;
}
.gantt-actions {
display: grid;
gap: 6px;
justify-items: stretch;
}
.history-list {
display: grid;
gap: 10px;
}
.history-list article {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
padding: 12px;
border-radius:0;
background: white;
}
.history-list small,
.history-list p {
display: block;
margin: 4px 0 0;
color: var(--muted);
font-size: 12px;
}
.empty-state {
padding: 24px;
border-radius:0;
background: white;
text-align: center;
}
.empty-state p {
color: var(--muted);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
th,
td {
padding: 12px;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
font-size: 13px;
}
th {
color: var(--muted);
font-size: 12px;
text-transform: uppercase;
}
.sort-th {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
width: 100%;
min-height: 24px;
border: 0;
padding: 0;
background: transparent;
color: inherit;
font: inherit;
font-weight: 800;
text-transform: inherit;
}
.sort-th span {
color: var(--hot);
font-size: 11px;
}
.column-filter-btn {
flex: 0 0 24px;
width: 24px;
height: 24px;
border: 1px solid var(--line);
border-radius:0;
background: white;
color: var(--muted);
font-size: 16px;
line-height: 1;
}
.column-filter-btn.active {
border-color: var(--hot);
background: rgba(92,108,150, 0.08);
color: var(--hot);
}
.column-resize-handle {
position: absolute;
top: -12px;
right: 0;
bottom: -12px;
width: 8px;
cursor: col-resize;
touch-action: none;
}
.column-resize-handle::after {
content: "";
position: absolute;
top: 7px;
right: 3px;
bottom: 7px;
width: 1px;
background: var(--line);
}
.universal-table-toolbar { display:flex; justify-content:flex-end; align-items:center; gap:7px; margin:0 0 7px; }
.universal-table-toolbar + .universal-table-toolbar { margin-top:-4px; }
.operational-quick-filters .universal-table-toolbar-inline { margin:0 0 0 auto; padding-left:8px; }
.table-header-toolbar { flex:0 0 auto; min-height:30px; margin:0 0 0 auto; padding:0; }
.table-header-toolbar .filter-btn { min-height:30px; height:30px; margin:0; padding:0 10px; white-space:nowrap; }
.module-header-actions > .table-header-toolbar { margin-left:0; }
body[data-view="instruments"] #primaryModule > .module-header :is(.primary-action,.table-header-toolbar,.table-header-toolbar .filter-btn) {
min-height:34px;
height:34px;
}
th[data-user-col-key] { position:relative; overflow:visible; cursor:grab; }
th[data-user-col-key]:active { cursor:grabbing; }
th[data-user-col-key] .column-filter-btn,th[data-user-col-key] .column-resize-handle { cursor:pointer; }
th[data-user-col-key] .column-resize-handle { cursor:col-resize; }
th[data-user-col-key] .sort-th { cursor:grab; }
.user-column-drag-handle { display:inline-flex; align-items:center; justify-content:center; width:18px; margin-left:4px; color:var(--muted); font-size:12px; letter-spacing:-3px; cursor:grab; user-select:none; opacity:.72; }
.user-column-drag-handle:active { cursor:grabbing; }
.is-reordering-columns th { outline:1px dashed rgba(92,108,150,.35); outline-offset:-2px; }
.is-reordering-columns th.column-drag-source { opacity:.48; }
.is-reordering-columns th.column-drop-before::before,.is-reordering-columns th.column-drop-after::after { content:""; position:absolute; z-index:8; top:3px; bottom:3px; width:3px; border-radius:0; background:var(--aryvor-primary); box-shadow:none; }
.is-reordering-columns th.column-drop-before::before { left:-2px; }
.is-reordering-columns th.column-drop-after::after { right:-2px; }
.universal-filter-btn { margin-left:4px; vertical-align:middle; }
.universal-resize-handle { z-index:12; top:0; right:-6px; bottom:0; width:13px; }
.universal-resize-handle::after { top:5px; right:6px; bottom:5px; background:color-mix(in srgb,var(--aryvor-secondary) 42%,var(--line)); }
th[data-user-col-key]:hover .universal-resize-handle::after { width:2px; background:var(--aryvor-secondary); }
.universal-select-all.active { border-color:rgba(92,108,150,.55); background:rgba(92,108,150,.12); color:var(--aryvor-secondary); }
th.user-selection-column { min-width:128px; overflow:visible !important; }
th.user-selection-column .universal-filter-btn { display:inline-flex !important; visibility:visible !important; opacity:1 !important; }
th.user-selection-column .universal-resize-handle { display:block !important; right:-5px; width:12px; }
.universal-header-select-all { width:15px !important; height:15px !important; margin:0 6px 0 0 !important; vertical-align:middle; cursor:pointer; accent-color:var(--aryvor-primary); }
.universal-filter-menu { position:absolute; z-index:80; top:calc(100% + 4px); right:4px; width:270px; padding:10px; border:1px solid var(--border); border-radius:0; background:var(--panel); box-shadow:none; text-align:left; }
.universal-filter-search { box-sizing:border-box; width:100%; margin-bottom:8px; padding:7px 9px; border:1px solid var(--border); border-radius:0; background:var(--surface); color:var(--fg); }
.universal-filter-menu .column-filter-values { max-height:240px; overflow:auto; }
.universal-filter-menu .filter-check { display:flex; align-items:center; gap:8px; padding:5px 3px; color:var(--fg); font-size:11px; }
.universal-filter-menu .filter-check[hidden] { display:none; }
.universal-filter-actions { display:flex; justify-content:space-between; gap:8px; margin-top:9px; padding-top:9px; border-top:1px solid var(--border); }
.universal-filter-actions button { padding:6px 9px; font-size:10px; }
.modal:has(.user-table-columns-modal) { width:min(720px,calc(100vw - 32px)); max-height:min(760px,calc(100vh - 32px)); padding:0; overflow:hidden; }
.modal:has(.user-table-columns-modal) .modal-head { margin:0; padding:18px 20px; border-bottom:1px solid var(--aryvor-border); }
.modal:has(.user-table-columns-modal) .modal-head h2 { font-size:21px; letter-spacing:-.02em; }
.modal:has(.user-table-columns-modal) #modalBody { min-height:0; }
.user-table-columns-modal { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; max-height:calc(100vh - 104px); }
.user-table-columns-intro { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:11px; padding:16px 20px 13px; border-bottom:1px solid var(--aryvor-border); }
.user-table-columns-icon { display:grid; place-items:center; width:32px; height:32px; border:1px solid rgba(92,108,150,.34); border-radius:0; background:rgba(92,108,150,.1); color:var(--aryvor-secondary); font-size:17px; }
.user-table-columns-intro strong { display:block; color:var(--aryvor-text); font-size:13px; }
.user-table-columns-intro p { margin:3px 0 0; color:#A3A29B; font-size:11px; line-height:1.45; }
.user-table-columns-count { padding:4px 8px; border-radius:0; background:rgba(92,108,150,.1); color:var(--aryvor-secondary); font-size:10px; font-weight:750; white-space:nowrap; }
.user-table-column-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:none; padding:14px 20px; overflow:auto; scrollbar-color:#6E6D66 transparent; }
.user-table-column-option { display:flex; align-items:center; gap:10px; min-width:0; min-height:42px; padding:8px 10px; border:1px solid var(--aryvor-border); border-radius:0; background:rgba(255,255,255,.018); color:var(--aryvor-text); cursor:pointer; transition:border-color .14s ease,background .14s ease; }
.user-table-column-option:hover { border-color:rgba(92,108,150,.4); background:rgba(92,108,150,.055); }
.user-table-column-option input[type="checkbox"] { appearance:none; -webkit-appearance:none; display:grid; place-content:center; flex:0 0 17px; width:17px !important; min-width:17px !important; height:17px !important; min-height:17px !important; margin:0 !important; padding:0 !important; border:1px solid #6E6D66 !important; border-radius:0; background:#0D0D0C !important; cursor:pointer; }
.user-table-column-option input[type="checkbox"]::after { content:""; width:7px; height:4px; border-left:2px solid #141413; border-bottom:2px solid #141413; transform:rotate(-45deg) scale(0); transition:transform .12s ease; }
.user-table-column-option input[type="checkbox"]:checked { border-color:var(--aryvor-primary) !important; background:var(--aryvor-primary) !important; }
.user-table-column-option input[type="checkbox"]:checked::after { transform:rotate(-45deg) scale(1); }
.user-table-column-option input[type="checkbox"]:focus-visible { outline:2px solid var(--aryvor-secondary); outline-offset:2px; }
.user-table-column-option span { min-width:0; overflow:hidden; color:inherit; font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.user-table-columns-footer { display:flex; justify-content:flex-end; align-items:center; gap:9px; padding:12px 20px; border-top:1px solid var(--aryvor-border); background:rgba(8,10,18,.25); }
.user-table-columns-footer .filter-btn,.user-table-columns-footer .primary-action { min-height:34px; padding:7px 12px; }
@media (max-width: 720px) { .user-table-column-list { grid-template-columns:1fr; } }
@media print { .universal-table-toolbar,.universal-filter-menu,.user-column-drag-handle,.universal-filter-btn,.universal-resize-handle { display:none !important; } }
.resizing-column,
.resizing-column * {
cursor: col-resize !important;
user-select: none !important;
}
.column-filter-menu {
position: absolute;
z-index: 20;
top: calc(100% - 4px);
left: 8px;
width: 240px;
padding: 10px;
border: 1px solid var(--line);
border-radius:0;
background: var(--surface, #1C1C1A);
box-shadow:none;
color: var(--ink);
text-align: left;
text-transform: none;
}
.column-filter-values {
max-height: 240px;
overflow: auto;
padding-top: 6px;
border-top: 1px solid var(--line);
}
.filter-check {
display: flex;
align-items: center;
gap: 9px;
min-height: 32px;
padding: 4px 6px;
font-size: 12px;
font-weight: 650;
}
.filter-check input {
flex: 0 0 auto;
}
.filter-check span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-all {
margin-bottom: 6px;
font-weight: 800;
}
.detail-panel {
display: grid;
gap: 12px;
}
.detail-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.interconnection-list { display: flex; flex-direction: column; gap: 8px; }
.interconnection-row { border: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.interconnection-diagram { display: block; width: 100%; min-width: 440px; height: auto; }
.interconnection-diagram .ic-panel-wall { fill: none; stroke: var(--line); stroke-dasharray: 4 3; }
.interconnection-diagram .ic-device { fill: var(--ink); font-size: 11px; font-weight: 700; }
.interconnection-diagram .ic-terminal-chip { fill: var(--ink); }
.interconnection-diagram .ic-terminal-chip-label { fill: var(--surface); font-size: 9px; font-weight: 800; }
.interconnection-diagram .ic-col-label { fill: var(--muted); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.interconnection-diagram .ic-pin-num { fill: var(--ink); font-size: 11px; font-weight: 700; }
.interconnection-diagram .ic-pin-nc { fill: var(--muted); font-size: 9px; font-style: italic; }
.interconnection-diagram .ic-pin-dot-neutral { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.interconnection-diagram .ic-nc-ring { fill: var(--surface); stroke: var(--muted); stroke-width: 1.4; }
.interconnection-diagram .ic-core-num { fill: var(--muted); font-size: 10px; }
.interconnection-diagram .ic-row-divider { stroke: var(--line); stroke-width: 1; }
.interconnection-diagram .ic-wire { fill: none; stroke-width: 2; }
.interconnection-diagram .ic-wire-neutral { stroke: var(--muted); }
.interconnection-diagram .ic-bundle { fill: color-mix(in srgb, var(--surface) 85%, var(--accent, #8496C2) 15%); stroke: var(--line); stroke-dasharray: 2 2; }
.interconnection-diagram .ic-gland { fill: var(--ink); opacity: .55; }
.interconnection-diagram .ic-ground-row { fill: color-mix(in srgb, var(--surface) 82%, #B7C24C 18%); }
.interconnection-diagram .ic-wire-label { fill: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .03em; }
.detail-meta span,
.panel-hint {
min-height: 28px;
padding: 6px 10px;
border-radius:0;
background: white;
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.bars {
display: grid;
grid-template-columns: repeat(7, 1fr);
align-items: end;
gap: 9px;
height: 210px;
padding: 18px;
border-radius:0;
background: white;
}
.bar {
position: relative;
min-height: 22px;
border-radius:0;
background: #d7d7d4;
}
.bar:nth-child(2n) {
background: repeating-linear-gradient(-55deg, #E3E0D5 0 4px, #f6f6f5 4px 8px);
}
.bar strong {
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
padding: 5px 8px;
border-radius:0;
background: var(--hot);
color: white;
font-size: 12px;
}
.accent {
display: grid;
grid-template-columns: 180px 1fr;
gap: 16px;
}
.accent-panel {
min-height: 230px;
padding: 24px;
border-radius:0;
background: var(--hot);
color: white;
}
.accent-panel strong {
display: block;
margin: 12px 0;
font-size: 28px;
}
.accent-panel span { color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; }
.accent-panel p { color: rgba(255,255,255,.7) !important; font-size: 13px; margin-top: 6px; }
.topology,
.topology-map {
display: grid;
grid-template-columns: repeat(4, minmax(110px, 1fr));
gap: 10px;
}
.node {
position: relative;
text-align: left;
min-height: 76px;
padding: 12px;
border: 1px solid var(--line);
border-radius:0;
background: white;
}
.node::after {
content: "";
position: absolute;
inset: auto 16px -7px 16px;
height: 3px;
border-radius:0;
background: var(--hot);
opacity: 0.45;
}
.node strong,
.node small {
display: block;
}
.node small {
margin-top: 5px;
color: var(--muted);
}
.selected-node {
border-color: var(--hot);
box-shadow:none;
}
.topology-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.topology-legend span {
padding: 5px 9px;
border-radius:0;
background: white;
color: var(--muted);
font-size: 11px;
font-weight: 700;
}
.topology-breakdown {
min-width: 0;
overflow-x: auto;
}
.topology-branch {
min-width: 880px;
}
.topology-tree-row {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
align-items: center;
gap: 8px;
min-height: 58px;
}
.tree-toggle {
width: 26px;
height: 26px;
border: 1px solid var(--line);
border-radius:0;
background: white;
color: var(--ink);
font-weight: 800;
}
.tree-toggle.leaf {
border-color: transparent;
background: transparent;
color: var(--muted);
cursor: default;
}
.tree-node {
display: grid;
grid-template-columns: minmax(185px, 1.15fr) minmax(220px, 1.35fr) minmax(82px, auto) minmax(105px, auto) auto;
align-items: center;
gap: 12px;
min-height: 50px;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius:0;
background: white;
color: var(--ink);
text-align: left;
}
.tree-node-main strong,
.tree-node-main small {
display: block;
}
.tree-node-main small,
.cable-link,
.child-count {
color: var(--muted);
font-size: 12px;
}
.tree-node-main small {
margin-top: 3px;
}
.tree-node-main .status {
margin-top: 6px;
}
.topology-work-state {
display: grid;
gap: 4px;
justify-items: start;
}
.topology-work-state small {
color: var(--muted);
font-size: 10px;
font-weight: 750;
text-transform: uppercase;
}
.cable-link {
padding-left: 18px;
position: relative;
}
.cable-link::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 11px;
height: 1px;
background: var(--hot);
}
.topology-children {
position: relative;
margin-left: 14px;
padding-left: 24px;
border-left: 1px solid #c9c6c4;
}
.topology-children > .topology-branch > .topology-tree-row {
position: relative;
}
.topology-children > .topology-branch > .topology-tree-row::before {
content: "";
position: absolute;
top: 50%;
left: -24px;
width: 24px;
border-top: 1px solid #c9c6c4;
}
.cycle-note {
margin: 0 0 8px 40px;
color: var(--critical);
font-size: 12px;
}
.timeline {
display: grid;
gap: 9px;
}
.gantt-row {
display: grid;
grid-template-columns: 130px 1fr 45px;
align-items: center;
gap: 12px;
font-size: 13px;
}
.gantt-row.rich {
grid-template-columns: 150px 1fr 64px;
}
.gantt-row strong small {
display: block;
margin-top: 4px;
color: var(--muted);
font-weight: 600;
}
.plan-line {
height: 8px;
margin-bottom: 5px;
border-radius:0;
background: white;
overflow: hidden;
}
.plan-line span {
display: block;
height: 100%;
border-radius:0;
background: #b9bab7;
}
.track {
height: 18px;
border-radius:0;
background: white;
overflow: hidden;
}
.fill {
height: 100%;
border-radius:0;
background: var(--hot);
}
.fill.ok {
background: var(--ok);
}
.fill.warn {
background: var(--warn);
}
.report-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.report-card {
min-height: 95px;
padding: 14px;
border-radius:0;
background: white;
}
.report-card strong {
display: block;
margin-top: 14px;
font-size: 25px;
}
.report-strip,
.mini-kpis,
.schema-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.report-strip {
align-items: center;
justify-content: space-between;
padding: 14px;
border-radius:0;
background: white;
}
.report-strip span,
.mini-kpis span,
.schema-list span {
min-height: 28px;
padding: 6px 10px;
border-radius:0;
background: var(--soft);
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.import-card {
cursor: pointer;
border: 1px dashed #c6c7c3;
}
.import-card input {
width: 100%;
color: var(--muted);
}
.import-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding:12px 14px; border:1px solid var(--line); border-radius:0; background:var(--soft); }
.import-toolbar strong,.import-toolbar small { display:block; }
.import-toolbar small { margin-top:3px; color:var(--muted); }
.import-mode-notice {
display:grid;
gap:5px;
margin:0 0 14px;
padding:13px 15px;
border:1px solid rgba(92,108,150,.48);
border-left:3px solid #5C6C96;
background:rgba(92,108,150,.08);
color:#F7F6F1;
}
.import-mode-notice strong { font-size:13px; }
.import-mode-notice span { color:#C3BFB1; font-size:12px; line-height:1.55; }
.import-card-v2 { cursor:default; align-content:start; }
.import-card-actions { display:flex; align-items:center; gap:8px; margin-top:auto; }
.import-upload { cursor:pointer; }
.import-upload input { display:none; }
.bulk-pdf-upload { cursor:pointer; }
.bulk-pdf-upload input { display:none; }
.v3-page-head-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bulk-pdf-hint { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; color: var(--muted); }
.import-onboarding-dialog {
width:min(1120px,calc(100vw - 48px)) !important;
max-width:1120px !important;
max-height:calc(100vh - 40px) !important;
}
.import-onboarding-dialog .cadm-body { padding:20px 28px; }
.import-onboarding-lead { margin:0 0 14px; color:var(--muted); font-size:13px; }
.import-onboarding-timeline { margin:0 0 22px; }
.import-onboarding-steps {
position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
gap:0; padding:4px 0 12px;
}
.import-onboarding-steps::before {
content:""; position:absolute; top:19px; left:7.1%; right:7.1%; height:1px;
background:var(--aryvor-border-strong, #2E2E2A);
}
.wizard-step { position:relative; z-index:1; display:grid; justify-items:center; gap:8px; min-width:0; color:var(--muted); text-align:center; }
.wizard-step-dot {
display:grid; place-items:center; width:30px; height:30px; box-sizing:border-box;
border:1px solid var(--aryvor-border-strong, #2E2E2A); border-radius:0;
background:var(--aryvor-elevated, #0D0D0C); color:var(--muted); font-size:11px; font-weight:700;
}
.wizard-step strong { width:100%; padding:0 6px; overflow-wrap:anywhere; color:inherit; font-size:10px; line-height:1.25; }
.wizard-step.done { color:var(--aryvor-success, #6E8F6B); }
.wizard-step.done .wizard-step-dot { border-color:var(--aryvor-success, #6E8F6B); background:var(--aryvor-success, #6E8F6B); color:var(--aryvor-bg, #000000); }
.wizard-step.active { color:var(--aryvor-secondary, #F2F1EC); }
.wizard-step.active .wizard-step-dot { border-color:var(--aryvor-primary, #8496C2); background:var(--aryvor-primary, #8496C2); color:var(--aryvor-bg, #000000); box-shadow:none; }
.wizard-step-context {
display:flex; align-items:baseline; justify-content:center; gap:10px; min-height:20px;
padding:9px 14px; border:1px solid var(--line); border-radius:0;
background:rgba(92,108,150,.055); text-align:center;
}
.wizard-step-context strong { color:var(--aryvor-secondary, #F2F1EC); font-size:12px; }
.wizard-step-context span { color:var(--muted); font-size:11px; }
.import-onboarding-dialog .import-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wizard-panel { min-height:390px; padding:4px 0; }
.wizard-welcome { display:grid; justify-items:center; text-align:center; padding:34px 20px; }
.wizard-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:0; background:rgba(92,108,150,.14); color:var(--aryvor-success, #6E8F6B); font-size:28px; font-weight:800; }
.wizard-welcome h3 { margin:16px 0 6px; font-size:21px; }
.wizard-welcome p,.wizard-section-head p { color:var(--muted); }
.wizard-welcome dl { display:grid; grid-template-columns:repeat(3,1fr); width:100%; max-width:650px; margin:24px 0 0; border:1px solid var(--line); border-radius:0; overflow:hidden; }
.wizard-welcome dl div { padding:13px; border-right:1px solid var(--line); }
.wizard-welcome dl div:last-child { border-right:0; }
.wizard-welcome dt { color:var(--muted); font-size:10px; text-transform:uppercase; }
.wizard-welcome dd { margin:4px 0 0; font-weight:750; }
.wizard-section-head { margin-bottom:14px; }
.wizard-section-head h3,.wizard-section-head p { margin:0 0 4px; }
.wizard-file-list { display:grid; gap:8px; }
.wizard-file-list > div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border:1px solid var(--line); border-radius:0; }
.wizard-file-list strong,.wizard-file-list small { display:block; }
.wizard-file-list small { margin-top:3px; color:var(--muted); }
.wizard-file-list > div.imported { border-color:var(--aryvor-success, #6E8F6B); background:rgba(92,108,150,.08); }
.wizard-import-summary { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:20px; }
.wizard-import-summary span { padding:6px 9px; border-radius:0; background:var(--soft); color:var(--muted); font-size:11px; }
.wizard-import-summary span.done { background:rgba(92,108,150,.12); color:var(--aryvor-success, #6E8F6B); }
.wizard-team-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; }
.wizard-team-groups section { min-width:0; padding:14px; border:1px solid var(--line); border-radius:0; background:rgba(255,255,255,.012); }
.wizard-team-groups h4 { margin:0 0 8px; color:var(--aryvor-text, #F2F1EC); font-size:12px; }
.wizard-team-groups label { display:flex; align-items:flex-start; gap:9px; padding:7px 0; border-top:1px solid var(--line); cursor:pointer; }
.wizard-team-groups label:first-of-type { border-top:0; }
.wizard-team-groups label > span { min-width:0; flex:1; }
.wizard-team-groups label strong,.wizard-team-groups label small { display:block; overflow-wrap:anywhere; }
.wizard-team-groups label small { margin-top:2px; color:var(--muted); font-size:9px; }
.wizard-role-select { width:100%; min-width:0; min-height:34px; margin-top:7px; font-size:11px; }
.wizard-area-groups { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wizard-empty { grid-column:1/-1; padding:28px; border:1px dashed var(--line); color:var(--muted); text-align:center; }
.project-role-select { width:190px; min-height:34px; margin-left:auto; }
.cadm-user-name small { display:block; margin-top:2px; color:var(--muted); font-weight:500; }
.empty-project-dashboard { display:grid; justify-items:center; padding:60px 20px; text-align:center; }
.empty-project-dashboard h2 { margin:16px 0 5px; }
.empty-project-dashboard p { margin:0 0 18px; color:var(--muted); }
.empty-project-steps { display:grid; gap:8px; padding-left:20px; }
.empty-project-steps li { padding:8px 0; }
.empty-project-steps button { margin-left:8px; }
@media (max-width:900px) {
.import-onboarding-dialog { width:min(760px,calc(100vw - 28px)) !important; max-width:760px !important; }
.wizard-team-groups { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wizard-step strong { font-size:9px; }
}
@media (max-width:700px) {
.import-onboarding-dialog { width:calc(100vw - 20px) !important; max-width:none !important; max-height:calc(100vh - 20px) !important; }
.import-onboarding-dialog .cadm-body { padding:16px; }
.import-onboarding-dialog .import-grid,.wizard-team-groups,.wizard-area-groups { grid-template-columns:1fr; }
.import-onboarding-steps { grid-template-columns:repeat(7,minmax(42px,1fr)); }
.wizard-step strong { display:none; }
.wizard-step-context { align-items:center; flex-direction:column; gap:2px; }
.wizard-welcome dl { grid-template-columns:1fr; }
.wizard-welcome dl div { border-right:0; border-bottom:1px solid var(--line); }
.wizard-welcome dl div:last-child { border-bottom:0; }
}
.code-card code {
white-space: normal;
line-height: 1.45;
}
.spacer {
height: 14px;
}
.toast {
position: fixed;
right: 28px;
bottom: 28px;
z-index: 10050;
max-width: 320px;
padding: 13px 16px;
border-radius:0;
background: #111112;
color: white;
font-weight: 700;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 160ms ease, transform 160ms ease;
}
.toast.visible {
opacity: 1;
transform: translateY(0);
}
.modal {
width: min(680px, calc(100vw - 32px));
border: 0;
border-radius:0;
padding: 18px;
background: var(--surface);
box-shadow:none;
}
.modal:has(.qc-modal-v2) {
width: min(1180px, calc(100vw - 40px));
max-height: calc(100vh - 32px);
overflow-y: auto;
}
/* Equipment/cable/tray info popups (detail-meta block + drawing matches +,
for cables, one or more interconnection diagrams stacked below) can
easily exceed viewport height once a cable has several terminal-block
groups — this had no explicit max-height/scroll rule at all, unlike every
other content-heavy modal above/below, so tall content could render
partly outside the visible dialog with no way to reach it. */
.modal:has(.detail-meta) {
width: min(600px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
overflow-y: auto;
}
.modal:has(.cable-test-suite) {
width: min(1080px, calc(100vw - 40px));
max-height: calc(100vh - 32px);
overflow-y: auto;
}
.modal:has(.checklist-execution-modal) {
width: min(1040px, calc(100vw - 40px));
max-height: calc(100vh - 32px);
overflow-y: auto;
}
/* Panel 360° overview — aggregates ~10 modules' worth of status for one
panel/MCC, so it needs the same wide/scrollable treatment as the QC modal. */
.modal:has(.panel-overview-modal) {
width: min(1180px, calc(100vw - 40px));
max-height: calc(100vh - 32px);
overflow-y: auto;
}
.panel-overview-modal {
display: flex;
flex-direction: column;
gap: 14px;
}
.panel-overview-section {
border: 1px solid var(--line);
padding: 12px 14px;
}
.panel-overview-section h3 {
margin: 0 0 10px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
}
.panel-overview-cable-list,
.panel-overview-breaker-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.panel-overview-cable-row,
.panel-overview-breaker-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid var(--line);
background: var(--surface-2, transparent);
}
.panel-overview-cable-dir {
color: var(--muted);
font-size: 12px;
}
.panel-overview-cable-status {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
font-size: 11px;
color: var(--muted);
}
.panel-overview-cable-status small {
margin-left: 6px;
}
.panel-overview-breaker-row span:first-child {
display: flex;
flex-direction: column;
}
.panel-overview-breaker-row small {
color: var(--muted);
}
.panel-overview-readiness,
.panel-overview-inline-status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.panel-overview-issue-list {
margin: 8px 0 0;
padding-left: 18px;
font-size: 12px;
}
.panel-overview-issue-list.critical li { color: var(--critical); }
.panel-overview-issue-list.warning li { color: var(--accent); }
.checklist-execution-modal .ops-table th,
.checklist-execution-modal .ops-table td { text-align: left; vertical-align: top; }
.modal:has(.import-record-editor),
.modal:has(.import-editor-grid) {
width: min(1060px, calc(100vw - 40px));
max-height: calc(100vh - 32px);
overflow-y: auto;
}
.import-record-editor { display:grid; gap:16px; }
.import-editor-notice { display:flex; gap:12px; padding:14px; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius:0; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.import-editor-notice > span { display:grid; place-items:center; flex:0 0 32px; height:32px; border-radius:0; background:var(--accent); color:#fff; font-weight:800; }
.import-editor-notice strong,.import-editor-notice p { display:block; margin:0; }
.import-editor-notice p { margin-top:3px; color:var(--muted); font-size:12px; }
.import-editor-selector { display:grid; gap:6px; max-width:420px; }
.import-editor-selector > span,.import-editor-field > span { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--muted); }
.import-editor-field > span small { padding:2px 5px; border-radius:0; background:var(--surface-2); }
.modal:has(.fes-tip-form) {
width: min(860px, calc(100vw - 40px));
max-height: calc(100vh - 32px);
overflow-y: auto;
}
.fes-tip-row3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.fes-tip-row2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.fes-tip-row2 select[multiple] { min-height:auto; }
.fes-tip-media { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
@media (max-width: 640px) {
.fes-tip-row3, .fes-tip-row2 { grid-template-columns: 1fr; }
}
.import-editor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-height:54vh; overflow:auto; padding:2px; }
.import-editor-field { display:grid; gap:5px; min-width:0; }
.import-editor-field input[readonly] { opacity:.7; background:var(--surface-2); cursor:not-allowed; }
.import-editor-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.import-edit-btn { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.row-data-edit-btn { display:block; margin-top:6px; color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.row-data-duplicate-btn { display:block; margin-top:6px; color:var(--text); border-color:var(--line); }
.record-management-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 14px; padding:13px 15px; border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line)); border-radius:0; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface)); }
.record-management-bar > div { display:grid; gap:3px; }
.record-management-bar strong { color:var(--text); font-size:13px; }
.record-management-bar small { color:var(--muted); font-size:11px; }
.modal:has(.operational-record-form) { width:min(980px,calc(100vw - 40px)); max-height:calc(100vh - 32px); overflow-y:auto; }
.operational-record-form { width:100%; min-width:0; }
.operational-record-notice { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; padding:14px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:0; background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.operational-record-notice > span { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:0; background:var(--accent); color:#fff; font-size:18px; font-weight:800; }
.operational-record-notice strong,.operational-record-notice p { margin:0; }
.operational-record-notice p { margin-top:4px; color:var(--muted); font-size:12px; }
.operational-record-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.operational-record-grid label { display:grid; gap:5px; min-width:0; }
.operational-record-grid label > span { color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.055em; text-transform:uppercase; }
.operational-record-grid .settings-select { width:100%; min-width:0; }
.operational-record-wide { grid-column:span 2; }
.operational-record-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
html[data-theme="light"] .record-management-bar,html[data-theme="light"] .operational-record-notice { box-shadow:none; }
.operational-data-editor-row > td { padding:0 !important; background:color-mix(in srgb,var(--accent) 5%,var(--surface)) !important; border-top:2px solid var(--accent) !important; }
.operational-data-editor-row form { padding:16px 18px 18px; }
.operational-edit-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.operational-edit-heading div { display:flex; flex-direction:column; gap:3px; }
.operational-edit-heading strong { color:var(--text); font-size:14px; }
.operational-edit-heading small { color:var(--muted); font-size:11px; }
.operational-edit-heading > span { padding:5px 9px; border-radius:0; background:var(--surface-2); border:1px solid var(--line); font-weight:700; }
.operational-edit-grid { display:grid; grid-template-columns:repeat(4,minmax(170px,1fr)); gap:11px; }
.operational-edit-grid label { display:grid; gap:5px; min-width:0; }
.operational-edit-grid label > span { color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.055em; text-transform:uppercase; }
.operational-edit-grid .settings-select { width:100%; min-width:0; }
.operational-edit-wide { grid-column:span 2; }
.operational-edit-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:15px; padding-top:12px; border-top:1px solid var(--line); }
html[data-theme="light"] .operational-data-editor-row > td { background:#F7F6F1 !important; border-color:var(--aryvor-accent) !important; }
@media (max-width:1000px) { .operational-edit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .operational-edit-grid { grid-template-columns:1fr; } .operational-edit-wide { grid-column:auto; } }
@media (max-width:760px) { .record-management-bar { align-items:stretch; flex-direction:column; } .operational-record-grid { grid-template-columns:1fr; } .operational-record-wide { grid-column:auto; } .operational-record-form { min-width:0; } }
/* QHSE Core · Ultra */
.qhse-overview { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; padding:20px 22px; border:1px solid color-mix(in srgb,var(--warn) 42%,var(--line)); border-radius:0; background:linear-gradient(135deg,color-mix(in srgb,var(--warn) 11%,var(--surface)),var(--surface)); }
.qhse-overview span { color:var(--warn); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.qhse-overview h2,.qhse-overview p { margin:0; }.qhse-overview h2 { margin-top:4px; font-size:22px; }.qhse-overview p { margin-top:5px; color:var(--muted); }
.qhse-overview>div:last-child { display:flex; gap:8px; }
.qhse-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.qhse-kpis article { padding:14px 16px; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:0; background:var(--surface); }
.qhse-kpis article.critical { border-top-color:var(--critical); }.qhse-kpis article.ok { border-top-color:var(--ok); }
.qhse-kpis span,.qhse-kpis strong { display:block; }.qhse-kpis span { color:var(--muted); font-size:11px; }.qhse-kpis strong { margin-top:5px; font-size:24px; }
.qhse-tabs { display:flex; gap:6px; margin-bottom:12px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.qhse-tabs button { padding:8px 11px; border:1px solid transparent; border-radius:0; background:transparent; color:var(--muted); cursor:pointer; }
.qhse-tabs button.active { border-color:var(--line); background:var(--surface-2); color:var(--text); font-weight:750; }
.qhse-blocked-list { display:grid; gap:8px; }.qhse-blocked-list article { display:grid; grid-template-columns:minmax(220px,1fr) 2fr auto; align-items:center; gap:16px; padding:13px 15px; border:1px solid color-mix(in srgb,var(--critical) 28%,var(--line)); border-left:3px solid var(--critical); border-radius:0; background:var(--surface); }
.qhse-blocked-list strong,.qhse-blocked-list small { display:block; }.qhse-blocked-list small,.qhse-blocked-list p { color:var(--muted); }.qhse-blocked-list p { margin:0; }
.modal:has(.qhse-form) { width:min(900px,calc(100vw - 36px)); max-height:calc(100vh - 28px); overflow-y:auto; }
.qhse-form-intro { display:flex; gap:12px; margin-bottom:16px; padding:14px; border:1px solid color-mix(in srgb,var(--warn) 36%,var(--line)); border-radius:0; background:color-mix(in srgb,var(--warn) 8%,var(--surface)); }
.qhse-form-intro>span { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:0; background:var(--warn); color:#fff; }.qhse-form-intro strong,.qhse-form-intro p { margin:0; }.qhse-form-intro p,.qhse-rule-help { margin-top:4px; color:var(--muted); font-size:12px; }
.qhse-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.qhse-form-grid label { display:grid; gap:5px; color:var(--muted); font-size:11px; font-weight:700; }.qhse-form-grid :is(input,select,textarea) { width:100%; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:0; background:var(--surface-2); color:var(--text); font:inherit; }.qhse-form-grid textarea { min-height:68px; resize:vertical; }.qhse-form-grid .full { grid-column:1/-1; }
.qhse-form>.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; padding-top:13px; border-top:1px solid var(--line); }
html[data-theme="light"] .qhse-overview,html[data-theme="light"] .qhse-kpis article,html[data-theme="light"] .qhse-blocked-list article { box-shadow:none; }
@media(max-width:760px){.qhse-overview{align-items:stretch;flex-direction:column}.qhse-overview>div:last-child{flex-wrap:wrap}.qhse-kpis{grid-template-columns:repeat(2,1fr)}.qhse-form-grid{grid-template-columns:1fr}.qhse-blocked-list article{grid-template-columns:1fr}.qhse-tabs{overflow-x:auto}}
.energization-ready-alert { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; padding:14px 16px; border:1px solid; border-radius:0; }
.energization-ready-alert.has-ready { border-color:color-mix(in srgb,var(--warn) 45%,var(--line)); background:color-mix(in srgb,var(--warn) 10%,var(--surface)); }
.energization-ready-alert.is-clear { border-color:color-mix(in srgb,var(--ok) 35%,var(--line)); background:color-mix(in srgb,var(--ok) 7%,var(--surface)); }
.energization-ready-icon { display:grid; place-items:center; flex:0 0 28px; height:28px; border-radius:0; background:var(--warn); color:#fff; font-weight:900; }
.energization-ready-alert.is-clear .energization-ready-icon { background:var(--ok); }
.energization-ready-alert strong,.energization-ready-alert p { margin:0; }
.energization-ready-alert p { margin-top:3px; color:var(--muted); font-size:12px; }
.energization-ready-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.energization-ready-list button { display:flex; flex-direction:column; align-items:flex-start; }
.energization-ready-list small { color:var(--muted); font-size:10px; }
.energization-equipment-summary { display:flex; flex-direction:column; min-height:42px; padding:9px 11px; border:1px solid var(--line); border-radius:0; background:var(--surface-2); }
.energization-equipment-summary small { color:var(--muted); margin-top:2px; }
@media (max-width:760px) { .import-editor-grid { grid-template-columns:1fr; } }
.modal::backdrop {
background: rgba(24, 24, 25, 0.25);
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.modal-head h2 {
margin: 0;
}
@media (max-width: 1180px) {
.shell {
grid-template-columns: 66px 1fr;
position: relative;
}
.sidebar {
position: absolute;
z-index: 20;
top: 0;
bottom: 0;
left: 66px;
width: 250px;
padding: 38px 18px 24px;
overflow-y: auto;
background: rgba(247, 245, 244, 0.98);
box-shadow:none;
transform: translateX(-110%);
opacity: 0;
pointer-events: none;
transition: transform 180ms ease, opacity 140ms ease;
}
.shell.sidebar-open .sidebar {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
.workspace {
padding-left: 0;
}
.mobile-menu {
display: grid;
}
.kpis {
grid-template-columns: repeat(3, 1fr);
}
.split-view,
.lower-grid {
grid-template-columns: 1fr;
}
}
/* Import conflict strategy — shared by register CSV and material workbook imports. */
.modal:has(.import-decision) {
width: min(920px, calc(100vw - 32px));
max-width: 920px;
}
.import-decision { display:grid; gap:20px; }
.import-decision-intro h3 { margin:6px 0 8px; color:#f2f1f6; font-size:21px; line-height:1.3; }
.import-decision-intro p { margin:0; color:#A3A29B; line-height:1.55; }
.import-decision-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--aryvor-border); background:#0D0D0C; }
.import-decision-summary>div { min-width:0; padding:16px 18px; border-right:1px solid var(--aryvor-border); }
.import-decision-summary>div:last-child { border-right:0; }
.import-decision-summary strong,.import-decision-summary span { display:block; }
.import-decision-summary strong { color:#f5f4f8; font-size:24px; line-height:1; }
.import-decision-summary span { margin-top:7px; color:#A3A29B; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.import-decision-summary .has-conflicts strong { color:#A8615C; }
.import-file-warning { margin:0; padding:11px 14px; border-left:3px solid #A8615C; background:rgba(168,97,92,.09); color:#B99B57; font-size:12px; line-height:1.45; }
.import-decision-error { margin:0; padding:12px 14px; border-left:3px solid #A8615C; background:rgba(168,97,92,.1); color:#A8615C; font-size:12px; line-height:1.5; }
.import-decision-error[hidden] { display:none; }
.import-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.import-mode-option { position:relative; min-width:0; min-height:154px; padding:19px; border:1px solid var(--aryvor-border); border-radius:0; background:#141413; color:#E3E0D5; text-align:left; cursor:pointer; transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.import-mode-option:hover { border-color:#5C6C96; background:#1C1C1A; transform:translateY(-1px); }
.import-mode-option strong,.import-mode-option span { display:block; }
.import-mode-option strong { margin-bottom:10px; font-size:15px; }
.import-mode-option span { color:#A3A29B; font-size:12px; line-height:1.55; }
.import-mode-option small { display:inline-block; margin-bottom:10px; color:#8496C2; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.import-mode-option.recommended { border-color:rgba(92,108,150,.72); box-shadow:none; }
.import-mode-option.danger:hover { border-color:#A8615C; }
.import-decision-footer { display:flex; justify-content:flex-end; align-items:center; gap:10px; padding-top:2px; }
@media (max-width:760px) {
.import-decision-summary,.import-mode-grid { grid-template-columns:1fr; }
.import-decision-summary>div { border-right:0; border-bottom:1px solid var(--aryvor-border); }
.import-decision-summary>div:last-child { border-bottom:0; }
.import-mode-option { min-height:auto; }
}
/* Sticky register headers and planning time axes */
.table-wrap,
.quality-table-wrap,
.wf-table-wrap,
.mat-table-wrap {
position: relative;
}
table thead,
table thead tr {
position: sticky;
top: 0;
z-index: 24;
}
table thead th,
th[data-user-col-key] {
position: sticky;
top: 0;
z-index: 25;
background: var(--surface-2, #1C1C1A);
box-shadow:none;
}
.user-column-drag-handle { display: none !important; }
.planning-gantt {
max-height: 62vh;
overflow: auto;
isolation: isolate;
}
.planning-gantt .planning-strip-header {
position: sticky;
top: 0;
z-index: 31;
background: var(--surface, #1C1C1A);
}
.planning-gantt .gantt-axis-row {
position: sticky;
top: 32px;
z-index: 30;
background: var(--surface, #1C1C1A);
}
.planning-gantt .gantt-axis .gantt-today-line { bottom: 0; }
.ig-gantt-wrap {
max-height: 68vh;
overflow: auto;
position: relative;
}
.ig-axis-row {
position: sticky;
top: 0;
z-index: 32;
}
.ig-today-line-body {
top: 0;
bottom: 0;
z-index: 18;
opacity: .92;
pointer-events: none;
}
html[data-theme="light"] table thead th,
html[data-theme="light"] th[data-user-col-key],
html[data-theme="light"] .planning-gantt .planning-strip-header,
html[data-theme="light"] .planning-gantt .gantt-axis-row {
background: #f0eff6;
color: var(--aryvor-text);
}
@media (max-width: 760px) {
.shell {
grid-template-columns: 1fr;
margin: 0;
border-radius:0;
}
.rail {
display: none;
}
.sidebar {
left: 0;
width: min(290px, 86vw);
}
.installation-layout #sideModule {
top: 12px;
right: 12px;
bottom: 12px;
}
.selection-action-bar {
align-items: stretch;
flex-direction: column;
}
.workflow-rule-banner {
grid-template-columns: 1fr;
}
.workspace {
padding: 12px;
}
.panel {
padding: 18px;
border-radius:0;
}
.topbar,
.hero-grid,
.panel-toolbar {
align-items: stretch;
flex-direction: column;
}
.topbar {
display: grid;
gap: 12px;
padding: 0;
}
.search {
width: 100%;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr;
}
.hero-controls {
flex-wrap: wrap;
}
.kpis,
.workflow-kpis,
.topology,
.topology-map,
.report-grid,
.accent,
.work-grid,
.import-grid,
.code-grid {
grid-template-columns: 1fr;
}
.ops-filters {
grid-template-columns: 1fr 1fr;
}
.list-row {
grid-template-columns: 1fr;
}
.ops-filters {
grid-template-columns: 1fr;
}
}
/* ========================================================================== */
/* ElecMount Atlas — full-canvas readability and semantic palette correction */
/* ========================================================================== */
:root {
--atlas-bg: #141413;
--atlas-canvas: #141413;
--atlas-panel: #1C1C1A;
--atlas-line: rgba(92,108,150, .18);
--atlas-line-strong: rgba(92,108,150, .30);
--atlas-text: #f1f3f8;
--atlas-muted: #8496C2;
--atlas-amber: #A8615C;
--atlas-cyan: #8496C2;
--atlas-red: #A8615C;
--ok: #6E8F6B;
--warn: #A8615C;
--critical: #A8615C;
--blue: #8496C2;
--hot: #A8615C;
--accent: #A8615C;
}
html, body {
width: 100%;
min-height: 100%;
background: var(--atlas-canvas) !important;
}
body::before { opacity: .035; }
.shell {
width: 100%;
height: 100vh;
margin: 0;
border: 0;
border-radius:0;
box-shadow:none;
}
.shell { grid-template-columns: 64px 238px minmax(0, 1fr); }
.shell.sidebar-collapsed { grid-template-columns: 64px 0 minmax(0, 1fr); }
.rail {
gap: 12px;
padding: 18px 11px;
background: #0D0D0C;
}
.brand { width: 42px; height: 42px; font-size: 19px; }
.rail-btn, .icon-btn, .round {
width: 42px;
height: 42px;
font-size: 16px;
}
.sidebar {
top: 0;
height: 100vh;
padding: 24px 17px 19px;
background: #141413;
}
.project-title { margin: 0 6px 22px; }
.project-title strong { font-size: 17px; }
.project-title span { font-size: 11px; line-height: 1.45; }
.tree p { margin: 17px 6px 6px; font-size: 9.5px; }
.tree a {
min-height: 32px;
padding: 6px 8px;
color: #8496C2;
font-size: 12.5px;
line-height: 1.35;
}
.tree a::before { width: 17px; flex-basis: 17px; font-size: 12px; }
.sidebar-card span { font-size: 10px; }
.sidebar-card small, .user-info-text small { font-size: 10px; line-height: 1.4; }
.user-info-text strong { font-size: 12px; }
.user-avatar-lg { width: 36px; height: 36px; font-size: 12px; }
.workspace { background: var(--atlas-canvas) !important; }
.topbar { min-height: 64px; padding: 10px 32px; background: #141413; }
.search { width: min(460px, 48vw); height: 40px; font-size: 13px; }
.top-actions select { min-height: 36px; font-size: 12px; }
.avatar, .plus-btn { width: 40px !important; height: 40px !important; font-size: 15px; }
.panel {
padding: 0 32px 52px !important;
border: 0 !important;
border-radius:0;
outline: 0 !important;
background: transparent !important;
box-shadow:none;
}
.panel-toolbar { min-height: 52px; padding: 9px 0; }
.crew .chip, #roleChip .chip { min-height: 26px; font-size: 10px; }
.eyebrow { font-size: 9.5px !important; }
.hero-copy p, .hero-grid.compact .hero-copy p {
max-width: 760px;
font-size: 12.5px;
line-height: 1.55;
}
.hero-controls select { min-height: 36px; font-size: 12px; }
.toggle { font-size: 11px; }
.metric-line b, .metric-line strong { min-height: 27px; font-size: 10.5px; }
.kpi-card span { font-size: 10px; }
.kpi-card strong { font-size: 28px; }
.kpi-card .trend { font-size: 10.5px; line-height: 1.4; }
body[data-view="dashboard"] .kpi-card { grid-template-columns: 82px 1fr; min-height: 128px; }
body[data-view="dashboard"] .kpi-card strong { width: 76px; height: 76px; font-size: 17px; }
.module, .module.accent, .cadm-card { padding: 24px 21px; }
.module-header h2, .module h2 { font-size: 16px; }
.module-subtitle { font-size: 11.5px; line-height: 1.5; }
.filter-btn, .cadm-btn-secondary, .primary-action, .cadm-btn-primary {
min-height: 34px;
padding-inline: 11px;
font-size: 11px;
}
.workflow-table, table { font-size: 11px; }
.workflow-table thead th, table thead th {
padding: 10px 9px;
color: #8496C2 !important;
font-size: 9px;
}
.workflow-table td, table td { padding: 9px; }
.status, .commessa-chip, .quality-status, .calibration-status, .risk-pill {
min-height: 23px;
padding: 3px 8px;
font-size: 9px;
}
.metric-line b,
.quality-status.published,
.calibration-status.valid,
.risk-pill.basso {
border-color: rgba(92,108,150, .26) !important;
background: rgba(92,108,150, .10) !important;
color: #C3BFB1 !important;
}
.metric-line strong,
.calibration-status.expired,
.risk-pill.alto,
.dash-donut-tag.critical {
border-color: rgba(168,97,92, .28) !important;
background: rgba(168,97,92, .10) !important;
color: #A8615C !important;
}
.eq-row-done, .equipment-row.eq-row-done { background: rgba(92,108,150, .055) !important; }
.planned-cell, .precon-cell, .tray-check-cell, .pull-length-cell, .pull-comment-cell,
.pull-notes-cell, .test-annex-cell, .ops-table tr.progress-row-blocked > td {
background: rgba(168,97,92, .05) !important;
}
.workflow-table tbody tr:hover, table tbody tr:hover { background: rgba(92,108,150, .045) !important; }
.login-overlay, .commessa-overlay, .cadm-overlay { background: var(--atlas-canvas) !important; }
@media (max-width: 1100px) {
.shell { width: 100%; height: 100vh; margin: 0; grid-template-columns: 60px 222px minmax(0,1fr); }
.sidebar { top: 0; height: 100vh; }
.panel { padding-inline: 22px !important; }
}
@media (max-width: 760px) {
.shell { width: 100%; height: 100vh; margin: 0; border-radius:0; }
.panel { padding-inline: 15px !important; }
.topbar { padding-inline: 15px; }
}
@media print {
body {
background: white;
}
.rail,
.sidebar,
.topbar,
.panel-toolbar,
.hero-controls,
.lower-grid,
.tool-buttons {
display: none;
}
.shell,
.panel {
display: block;
margin: 0;
border-radius:0;
box-shadow:none;
background: white;
}
.workspace {
padding: 0;
}
}
/* ── Cable Pulling register ───────────────────────────────────── */
.pulling-table {
min-width: 2100px;
}
.pull-length-cell {
vertical-align: top;
padding-top: 10px;
}
.pull-length-cell .mini-input {
max-width: 100%;
min-height: 36px;
padding: 0 10px;
font-size: 13px;
}
.pull-over-warn {
display: block;
margin-top: 4px;
color: #A8615C;
font-size: 11px;
font-weight: 650;
}
.pull-comment-cell {
vertical-align: top;
padding-top: 8px;
}
.pull-comment-textarea {
width: 100%;
min-height: 52px;
border: 1px solid var(--line);
border-radius:0;
padding: 7px 9px;
background: white;
color: var(--ink);
font: inherit;
font-size: 11px;
resize: vertical;
}
.pull-comment-textarea.required-field {
border-color: rgba(92,108,150, 0.6);
background: rgba(92,108,150, 0.04);
}
.pull-signature-label {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
font-size: 11px;
font-weight: 650;
cursor: pointer;
color: var(--ink);
}
.pull-signature-label input[type="checkbox"] {
width: 15px;
height: 15px;
flex-shrink: 0;
accent-color: var(--accent);
cursor: pointer;
}
.pull-signed-by {
display: block;
margin-top: 4px;
font-size: 10px;
color: #6E8F6B;
font-weight: 650;
}
.pull-notes-cell {
vertical-align: top;
padding-top: 8px;
}
.pull-notes-cell textarea {
width: 100%;
min-height: 52px;
border: 1px solid var(--line);
border-radius:0;
padding: 7px 9px;
background: white;
color: var(--ink);
font: inherit;
font-size: 11px;
resize: vertical;
}
/* ── Cable Termination register ───────────────────────────────── */
.term-table {
min-width: 2200px;
}
/* ── Cable Testing register ───────────────────────────────────── */
.testing-table {
min-width: 2260px;
}
.test-instrument-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 12px; padding:11px 14px; border:1px solid var(--border); border-radius:0; background:var(--surface); }
.test-instrument-toolbar strong,.test-instrument-toolbar span { display:block; }
.test-instrument-toolbar span { margin-top:3px; color:var(--muted); font-size:11px; }
.test-instrument-snapshot strong,.test-instrument-snapshot small { display:block; }
.test-instrument-link { display:block; padding:0; border:0; background:none; color:var(--accent); font:inherit; font-weight:750; text-align:left; cursor:pointer; }
.test-instrument-link:hover { text-decoration:underline; }
.test-instrument-snapshot small { margin:3px 0 5px; color:var(--muted); font-size:10px; }
.test-instrument-snapshot .calibration-status { display:inline-flex; padding:2px 6px; font-size:9px; }
.test-instrument-rules { display:grid; gap:8px; }
.test-instrument-rule-row { display:grid; grid-template-columns:minmax(120px,.7fr) minmax(260px,1.3fr); align-items:center; gap:14px; padding:10px; border:1px solid var(--border); border-radius:0; }
.test-instrument-rule-row strong,.test-instrument-rule-row small { display:block; }
.test-instrument-rule-row small { margin-top:3px; color:var(--muted); }
.test-annex-cell {
vertical-align: top;
padding-top: 8px;
}
.annex-upload-label {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 5px;
padding: 4px 10px;
border: 1px solid var(--line);
border-radius:0;
font-size: 11px;
font-weight: 650;
cursor: pointer;
background: white;
color: var(--ink);
white-space: nowrap;
}
.annex-upload-label:hover {
background: var(--surface);
}
.annex-upload-label input[type="file"] {
display: none;
}
.status-select.critical {
border-color: rgba(92,108,150, 0.5);
background: rgba(92,108,150, 0.07);
}
/* ── Grounding tabs ──────────────────────────────────────────── */
.grounding-tabs {
display: flex;
gap: 4px;
padding: 12px 20px 0;
border-bottom: 1px solid var(--line);
overflow-x: auto;
scrollbar-width: none;
}
.grounding-tabs::-webkit-scrollbar { display: none; }
.grounding-tab-btn {
padding: 7px 16px;
border: 1px solid transparent;
border-bottom: none;
border-radius:0;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
position: relative;
bottom: -1px;
transition: color 0.15s, background 0.15s;
}
.grounding-tab-btn:hover {
color: var(--ink);
background: var(--surface);
}
.grounding-tab-btn.active {
color: var(--accent, #5C6C96);
background: var(--bg, white);
border-color: var(--line);
border-bottom-color: var(--bg, white);
}
/* ── Grounding table ─────────────────────────────────────────── */
.grounding-table { min-width: 1400px; }
/* ── Planned dates cell ──────────────────────────────────────── */
.planned-cell {
white-space: nowrap;
padding: 6px 10px !important;
}
.planned-cell strong {
display: block;
font-size: 12px;
font-weight: 650;
color: var(--ink);
}
.planned-cell small {
display: block;
font-size: 11px;
color: var(--muted);
margin-top: 1px;
}
.overdue-badge {
display: inline-block;
margin-top: 3px;
padding: 1px 6px;
border-radius:0;
background: rgba(92,108,150, 0.12);
color: #A8615C;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
}
.ontime-badge {
display: inline-block;
margin-top: 3px;
padding: 1px 6px;
border-radius:0;
background: rgba(92,108,150, 0.1);
color: #6E8F6B;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
}
/* ── Role-based nav visibility ───────────────────────────────── */
.nav-hidden,
.nav-hidden-commessa,
.nav-section-hidden { display: none !important; }
/* ── Installation read-only mode (contractor-manager / qa) ─────*/
body.installation-readonly .ops-table select.mini-select,
body.installation-readonly .ops-table select.status-select,
body.installation-readonly .ops-table textarea,
body.installation-readonly .ops-table input[type="number"],
body.installation-readonly .ops-table input[type="text"],
body.installation-readonly .ops-table input[type="file"] {
pointer-events: none;
opacity: 0.65;
cursor: not-allowed;
background: var(--surface, #f5f5f7);
}
body.installation-readonly .annex-upload-label {
pointer-events: none;
opacity: 0.65;
cursor: not-allowed;
}
body.installation-readonly .pull-signature-label {
pointer-events: none;
opacity: 0.65;
}
/* ── Read-only banner ────────────────────────────────────────── */
.readonly-banner {
display: flex;
align-items: center;
gap: 8px;
margin: 0 20px 12px;
padding: 8px 14px;
background: rgba(168,97,92, 0.08);
border: 1px solid rgba(168,97,92, 0.25);
border-radius:0;
font-size: 12px;
font-weight: 600;
color: #8a5500;
}
/* ── Planning strip — Gantt timeline ─────────────────────────── */
.planning-strip {
margin: 0 20px 14px;
padding: 12px 16px 10px;
background: var(--surface, #f5f5f7);
border: 1px solid var(--line);
border-radius:0;
}
.planning-strip-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.planning-gantt > summary.planning-strip-header {
list-style: none;
cursor: pointer;
user-select: none;
}
.planning-gantt > summary.planning-strip-header::-webkit-details-marker { display: none; }
.planning-strip-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 118px;
padding: 6px 10px;
border: 1px solid var(--border);
border-radius:0;
background: var(--surface-2);
color: var(--text);
font-size: 10px;
font-weight: 750;
white-space: nowrap;
}
.planning-strip-close { display: none; }
.planning-gantt[open] .planning-strip-open { display: none; }
.planning-gantt[open] .planning-strip-close { display: inline; }
.planning-gantt[open] .planning-strip-header {
grid-template-columns: minmax(210px,1fr) auto auto auto;
}
.planning-gantt:not([open]) { padding-block: 10px; }
.planning-gantt:not([open]) .planning-strip-header {
grid-template-columns: minmax(210px,1fr) auto;
margin-bottom: 0;
}
.planning-gantt:not([open]) .gantt-legend,
.planning-gantt:not([open]) .gantt-today-badge { display: none; }
@media (max-width: 760px) {
.planning-gantt[open] .planning-strip-header { grid-template-columns: 1fr auto; }
.planning-gantt[open] .gantt-legend { grid-column: 1 / -1; }
.planning-gantt[open] .gantt-today-badge { grid-column: 1; }
}
.planning-strip-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--muted);
}
.gantt-today-badge {
font-size: 11px;
font-weight: 650;
color: #A8615C;
background: rgba(92,108,150,0.09);
padding: 2px 8px;
border-radius:0;
}
/* Chart container */
.gantt-chart {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Axis row (month ticks) */
.gantt-axis-row {
display: flex;
align-items: flex-end;
height: 18px;
}
.gantt-label-spacer {
width: 110px;
flex-shrink: 0;
}
.gantt-axis {
flex: 1;
position: relative;
height: 100%;
border-bottom: 1px solid var(--line);
}
.gantt-tick {
position: absolute;
bottom: 2px;
transform: translateX(-50%);
font-size: 10px;
color: var(--muted);
white-space: nowrap;
}
.gantt-tick::before {
content: "";
position: absolute;
bottom: -4px;
left: 50%;
width: 1px;
height: 4px;
background: var(--line);
}
/* Data rows */
.gantt-row {
display: flex;
align-items: center;
height: 30px;
gap: 0;
}
.gantt-label {
width: 110px;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
padding-right: 8px;
}
.gantt-label strong {
font-size: 12px;
font-weight: 750;
color: var(--ink);
}
.gantt-badges {
display: flex;
gap: 2px;
}
.gantt-badges .status {
font-size: 9px;
padding: 1px 5px;
line-height: 1.4;
}
.gantt-track {
flex: 1;
position: relative;
height: 100%;
background: var(--bg, white);
border-radius:0;
}
/* Today vertical line — appears in both axis and each row */
.gantt-today-line {
position: absolute;
top: 0; bottom: 0;
width: 1.5px;
background: rgba(168,97,92, 0.5);
z-index: 3;
pointer-events: none;
}
.gantt-axis .gantt-today-line { top: -4px; }
/* Bars */
.gantt-bar {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 14px;
border-radius:0;
overflow: hidden;
z-index: 2;
display: flex;
align-items: center;
}
.gantt-bar.on-track { background: rgba(92,108,150,0.18); }
.gantt-bar.has-late { background: rgba(92,108,150,0.15); }
.gantt-bar.all-done { background: rgba(92,108,150,0.20); }
.gantt-done-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
background: rgba(92,108,150,0.55);
border-radius:0;
pointer-events: none;
}
.gantt-pct {
position: relative;
z-index: 1;
padding: 0 5px;
font-size: 9px;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
width: 100%;
text-align: center;
}
/* Date labels */
.gantt-date {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 9px;
color: var(--muted);
white-space: nowrap;
pointer-events: none;
z-index: 1;
}
.gantt-date-s { transform: translateX(-100%) translateY(-50%); padding-right: 2px; }
.gantt-date-e { padding-left: 2px; }
/* ── Precondition cell ───────────────────────────────────────── */
.precon-cell {
white-space: nowrap;
padding: 6px 8px !important;
}
.precon-cell small {
display: block;
font-size: 10px;
color: var(--muted);
margin-top: 2px;
white-space: normal;
}
/* ── Rail settings modal ─────────────────────────────────────── */
.settings-modal {
padding: 8px 0 4px;
}
.settings-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 6px;
}
.settings-select {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius:0;
font-size: 14px;
background: var(--surface);
color: var(--ink);
}
.settings-hint {
margin-top: 10px;
font-size: 12px;
color: var(--muted);
}
/* ── Interactive Gantt ───────────────────────────────────────── */
.ig-legend {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin-bottom: 10px;
font-size: 12px;
}
.ig-legend-item {
display: flex;
align-items: center;
gap: 5px;
}
.ig-legend-item i {
display: inline-block;
width: 14px;
height: 8px;
border-radius:0;
}
.ig-edit-hint {
font-size: 11px;
color: var(--muted);
margin: 0 0 10px;
}
.ig-gantt-wrap {
overflow-x: auto;
}
.ig-gantt {
min-width: 800px;
position: relative;
}
.ig-axis-row {
display: flex;
align-items: stretch;
border-bottom: 2px solid var(--line);
margin-bottom: 4px;
}
.ig-area-header-spacer {
width: 180px;
flex-shrink: 0;
}
.ig-axis {
flex: 1;
position: relative;
height: 28px;
background: var(--soft);
border-radius:0;
}
.ig-tick {
position: absolute;
top: 0;
transform: translateX(-50%);
font-size: 10px;
font-weight: 600;
color: var(--muted);
white-space: nowrap;
padding: 6px 0;
}
.ig-today-line {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: var(--hot);
z-index: 10;
}
.ig-today-badge {
position: absolute;
top: 2px;
left: 4px;
font-size: 9px;
font-weight: 700;
color: var(--hot);
white-space: nowrap;
}
.ig-area-group {
margin-bottom: 6px;
border: 1px solid var(--line);
border-radius:0;
overflow: hidden;
}
.ig-area-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px;
background: var(--soft);
border-bottom: 1px solid var(--line);
font-size: 13px;
width: 100%;
}
.ig-area-header > div { display:flex; align-items:baseline; gap:8px; min-width:0; }
.ig-delete-section {
min-height:28px;
padding:4px 9px;
border:1px solid color-mix(in srgb, var(--critical) 48%, var(--line));
border-radius:0;
background:transparent;
color:var(--critical);
font:inherit;
font-size:11px;
font-weight:700;
cursor:pointer;
}
.ig-delete-section:hover { background:color-mix(in srgb, var(--critical) 12%, transparent); }
.ig-area-header strong {
font-size: 13px;
}
.ig-area-header small {
font-size: 11px;
color: var(--muted);
}
.ig-row {
display: flex;
align-items: center;
border-bottom: 1px solid var(--line);
min-height: 36px;
}
.ig-row:last-child {
border-bottom: none;
}
.ig-row-label {
width: 180px;
flex-shrink: 0;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
}
.ig-row-label span {
font-weight: 700;
color: var(--ink);
font-size: 11px;
}
.ig-track {
flex: 1;
position: relative;
height: 36px;
background: #fafafa;
}
.ig-bar {
position: absolute;
top: 6px;
height: 24px;
border-radius:0;
cursor: pointer;
overflow: hidden;
display: flex;
align-items: center;
min-width: 30px;
transition: filter 0.1s;
user-select: none;
}
.ig-bar:hover {
filter: brightness(1.08);
}
.ig-bar-editable {
cursor: grab;
}
.ig-bar-editable:active {
cursor: grabbing;
}
.ig-bar-late {
outline: 2px solid var(--critical);
outline-offset: 1px;
}
.ig-bar-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
border-radius:0;
opacity: 0.4;
pointer-events: none;
}
.ig-bar-label {
position: relative;
z-index: 1;
font-size: 10px;
font-weight: 700;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,.35);
padding: 0 6px;
pointer-events: none;
white-space: nowrap;
}
.ig-resize-handle {
position: absolute;
top: 0;
bottom: 0;
width: 8px;
background: rgba(255,255,255,.3);
cursor: ew-resize;
z-index: 5;
}
.ig-resize-start { left: 0; border-radius:0; }
.ig-resize-end { right: 0; border-radius:0; }
.ig-bar-placeholder {
position: absolute;
top: 6px;
left: 10px;
height: 24px;
padding: 0 10px;
display: flex;
align-items: center;
font-size: 11px;
color: var(--muted);
border: 1px dashed var(--line);
border-radius:0;
cursor: pointer;
white-space: nowrap;
}
.ig-bar-placeholder:hover {
border-color: var(--hot);
color: var(--hot);
}
/* ── Topology filter bar ─────────────────────────────────────── */
.topology-filters {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.topology-filters label {
display: grid;
gap: 4px;
font-size: 12px;
font-weight: 700;
color: var(--muted);
}
.topology-filters select {
min-width: 180px;
min-height: 36px;
padding: 6px 10px;
border: 1px solid var(--border, #2E2E2A);
border-radius:0;
font-size: 13px;
background: white;
}
/* ── Checklist views ─────────────────────────────────────────── */
.checklist-toolbar {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.tab-group {
display: flex;
gap: 2px;
background: var(--soft);
padding: 3px;
border-radius:0;
}
.tab-btn {
padding: 5px 14px;
border: none;
border-radius:0;
font-size: 12px;
font-weight: 650;
background: transparent;
color: var(--muted);
cursor: pointer;
}
.tab-btn.active {
background: white;
color: var(--hot);
box-shadow:none;
}
.cl-hint {
font-size: 11px;
color: var(--muted);
max-width: 420px;
}
.row-dimmed td {
opacity: 0.5;
}
.checklist-summary {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
margin-bottom: 16px;
}
.cl-stat {
background: var(--soft);
border-radius:0;
padding: 10px;
text-align: center;
}
.cl-stat strong {
display: block;
font-size: 22px;
}
.cl-stat span {
font-size: 11px;
color: var(--muted);
}
.cl-modal-info {
margin-bottom: 10px;
color: var(--muted);
}
.mini-select {
padding: 3px 6px;
border: 1px solid var(--line);
border-radius:0;
font-size: 12px;
background: white;
}
/* ── Template editor ─────────────────────────────────────────── */
.template-editor {
display: grid;
gap: 14px;
}
.template-section {
border: 1px solid var(--line);
border-radius:0;
overflow: hidden;
}
.template-section-header {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--soft);
border-bottom: 1px solid var(--line);
font-size: 13px;
}
.template-section-header strong { flex: 1; }
.template-section-header span {
font-size: 11px;
color: var(--muted);
}
.template-table {
min-width: auto !important;
table-layout: fixed;
width: 100%;
}
.template-table th:first-child,
.template-table td:first-child {
width: auto;
}
/* ── Gantt full-width layout ─────────────────────────────────── */
.split-view.gantt-layout {
display: block;
}
.gantt-layout #primaryModule {
width: 100%;
}
.gantt-layout #sideModule {
position: fixed;
z-index: 60;
top: 28px;
right: 28px;
bottom: 28px;
width: min(360px, calc(100vw - 32px));
padding: 20px;
overflow-y: auto;
border: 1px solid var(--line);
border-radius:0;
background: var(--surface);
box-shadow:none;
transform: translateX(calc(100% + 44px));
opacity: 0;
pointer-events: none;
transition: transform 200ms ease, opacity 160ms ease;
}
.gantt-layout.drawer-open #sideModule {
display: block;
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
/* Gantt topbar */
.gantt-topbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.gantt-topbar .ig-legend {
margin: 0;
}
.gantt-legend-panel {
display: grid;
grid-template-columns: minmax(420px, .9fr) minmax(560px, 1.35fr);
gap: 12px;
margin: 4px 0 12px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius:0;
background: rgba(255,255,255,.72);
}
.gantt-legend-section {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px 13px;
}
.gantt-legend-section > strong {
flex: 0 0 100%;
color: var(--muted);
font-size: 9px;
letter-spacing: .35px;
text-transform: uppercase;
}
.gantt-legend-panel .ig-legend { gap: 7px 14px; margin: 0; font-size: 10px; }
.gantt-reading-legend > span {
display: grid;
grid-template-columns: 24px auto;
grid-template-rows: auto auto;
column-gap: 6px;
align-items: center;
}
.gantt-reading-legend > span .gantt-key { grid-row: 1 / 3; }
.gantt-reading-legend b { font-size: 9px; line-height: 1.1; }
.gantt-reading-legend small { color: var(--muted); font-size: 8px; line-height: 1.15; }
.gantt-key {
display: block;
width: 24px;
height: 12px;
border-radius:0;
background: #A8615C;
}
.gantt-key-fill { background: linear-gradient(90deg, rgba(92,108,150,.75) 0 65%, #8496C2 65% 100%); }
.gantt-key-plan { background: #8496C2; border: 1px solid #8496C2; }
.gantt-key-late { background: #A8615C; border: 2px solid var(--critical); }
.gantt-key-today { width: 3px; height: 19px; margin-left: 10px; border-radius:0; background: var(--hot); }
.gantt-key-count {
display: grid;
place-items: center;
width: 28px;
height: 18px;
background: var(--soft);
color: var(--ink);
font-size: 8px;
font-style: normal;
font-weight: 800;
}
@media (max-width: 1180px) {
.gantt-legend-panel { grid-template-columns: 1fr; }
}
/* Gantt bar selected state */
.ig-bar.ig-bar-selected {
outline: 2px solid var(--ink);
outline-offset: 2px;
z-index: 5;
}
/* Gantt empty bar placeholder (read-only) */
.ig-bar-empty {
position: absolute;
top: 6px;
height: 24px;
left: 4px;
right: 4px;
border-radius:0;
background: transparent;
}
/* ── Gantt detail side panel ─────────────────────────────────── */
.gantt-detail-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.gantt-detail-dot {
width: 12px;
height: 12px;
border-radius:0;
flex-shrink: 0;
}
.gantt-detail-header strong {
display: block;
font-size: 14px;
}
.gantt-detail-header small {
display: block;
font-size: 11px;
color: var(--muted);
}
.gantt-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
.gantt-detail-card {
background: var(--soft);
border-radius:0;
padding: 10px;
}
.gantt-detail-card span {
display: block;
font-size: 10px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 3px;
}
.gantt-detail-card strong {
font-size: 14px;
}
.gantt-detail-bar-wrap {
margin-bottom: 12px;
}
.gantt-detail-bar-bg {
height: 10px;
border-radius:0;
background: var(--line);
overflow: hidden;
}
.gantt-detail-bar-fill {
height: 100%;
border-radius:0;
transition: width 0.3s ease;
}
.gantt-detail-hint {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 12px;
color: var(--muted);
text-align: center;
padding: 40px 20px;
}
.gantt-detail-hint span {
font-size: 32px;
opacity: 0.3;
}
.gantt-detail-hint p {
font-size: 13px;
margin: 0;
line-height: 1.5;
}
/* ── QC Record modal ─────────────────────────────────────────── */
.qc-modal-header {
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.qc-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
font-size: 12px;
}
.qc-supervisor-row,
.qc-findings-row {
margin-bottom: 10px;
}
.qc-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.qc-confirm-check {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 10px;
padding: 10px 13px;
border: 1px solid var(--line);
border-radius: 0;
background: color-mix(in srgb, var(--surface) 94%, #5C6C96 6%);
color: var(--ink);
font-size: 12px;
font-weight: 650;
}
/* Checklist table column header with sort + filter */
.col-header-inner {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.col-sortable {
cursor: pointer;
flex: 1;
}
.col-filter-btn {
border: none;
background: transparent;
padding: 1px 3px;
font-size: 11px;
color: var(--muted);
cursor: pointer;
border-radius:0;
}
.col-filter-btn:hover,
.col-filter-active {
color: var(--hot);
background: var(--hot-soft);
}
/* ── QC KPI strip ────────────────────────────────────────────── */
.qc-kpi-strip {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 10px;
}
.qc-kpi-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.qc-kpi-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius:0;
font-size: 13px;
border: 1.5px solid var(--pill-color, #A3A29B);
color: var(--pill-color, #A3A29B);
background: transparent;
font-family:inherit;
cursor:pointer;
box-shadow:none;
transition:background 140ms ease,box-shadow 140ms ease,transform 140ms ease;
}
.qc-kpi-pill:hover { background:color-mix(in srgb,var(--pill-color) 9%,transparent); transform:translateY(-1px); }
.qc-kpi-pill.active { background:color-mix(in srgb,var(--pill-color) 15%,transparent); box-shadow:none; }
.qc-kpi-pill:focus-visible { outline:2px solid var(--pill-color); outline-offset:2px; }
.qc-kpi-pill strong {
font-size: 15px;
}
.qc-filter-summary { display:flex; align-items:center; gap:9px; min-height:32px; color:var(--muted); font-size:11px; white-space:nowrap; }
.qc-filter-summary button { padding:4px 8px; border:0; background:transparent; color:var(--accent); font:inherit; font-weight:700; cursor:pointer; }
.qc-execution-intro { display:flex; align-items:flex-start; gap:12px; margin:0 0 14px; padding:13px 15px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:0; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.qc-execution-intro-icon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 auto; border-radius:0; background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); font-size:14px; font-weight:900; }
.qc-execution-intro strong { display:block; color:var(--text); font-size:12px; }
.qc-execution-intro p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
html[data-theme="light"] .qc-execution-intro { border-color:rgba(92,108,150,.24); background:#f6f4fb; }
html[data-theme="light"] .qc-execution-intro strong { color:var(--aryvor-text); }
.qc-prerequisite-box { display:grid; gap:12px; margin:0 0 16px; padding:15px 17px; border:1px solid color-mix(in srgb,var(--warn) 42%,var(--line)); background:color-mix(in srgb,var(--surface) 92%,var(--warn) 8%); }
.qc-prerequisite-title { display:flex; align-items:flex-start; gap:11px; }
.qc-prerequisite-title > span { display:grid; place-items:center; width:27px; height:27px; flex:0 0 auto; border:1px solid var(--warn); color:var(--warn); font-weight:900; }
.qc-prerequisite-title strong { display:block; color:var(--ink); font-size:13px; }
.qc-prerequisite-title p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.qc-prerequisite-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.qc-prerequisite-grid section { padding:12px 14px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 96%,transparent); }
.qc-prerequisite-grid section > strong { color:var(--ink); font-size:12px; }
.qc-prerequisite-grid ul { display:grid; gap:6px; margin:9px 0 0; padding-left:18px; color:var(--muted); font-size:11px; line-height:1.4; }
.qc-prerequisite-box > small { color:var(--muted); line-height:1.45; }
html[data-theme="light"] .qc-prerequisite-box { background:#fffaf0; }
@media(max-width:700px){.qc-prerequisite-grid{grid-template-columns:1fr}}
html[data-theme="light"] .qc-kpi-pill { background:#fff; }
html[data-theme="light"] .qc-kpi-pill:hover { background:color-mix(in srgb,var(--pill-color) 7%,#fff); }
html[data-theme="light"] .qc-kpi-pill.active { background:color-mix(in srgb,var(--pill-color) 13%,#fff); }
@media(max-width:760px){.qc-kpi-toolbar{flex-direction:column}.qc-filter-summary{white-space:normal}}
.qc-failed-banner {
background: rgba(168,97,92,0.07);
border: 1px solid rgba(168,97,92,0.3);
border-radius:0;
padding: 10px 14px;
font-size: 13px;
color: var(--critical);
margin-bottom: 12px;
}
/* ── QC Modal v2 ─────────────────────────────────────────────── */
.qc-modal-v2 {
display: flex;
flex-direction: column;
gap: 14px;
}
.qc-meta-strip {
display: flex;
flex-wrap: wrap;
gap: 0;
background: var(--surface-2, #f4f4f5);
border-radius:0;
overflow: hidden;
}
.qc-meta-cell {
display: flex;
flex-direction: column;
padding: 8px 14px;
border-right: 1px solid var(--line);
flex: 1;
min-width: 100px;
}
.qc-meta-cell:last-child { border-right: none; }
.qc-meta-cell span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.qc-meta-cell strong { font-size: 13px; margin-top: 1px; }
.qc-top-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-items: start;
}
.qc-field-label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-bottom: 5px;
}
.qc-progress-block small {
font-size: 11px;
color: var(--muted);
display: block;
margin-top: 4px;
}
.qc-prog-bar-wrap {
height: 8px;
background: var(--line);
border-radius:0;
overflow: hidden;
margin-top: 6px;
}
.qc-prog-bar-fill {
height: 100%;
border-radius:0;
transition: width 200ms ease;
}
.qc-completion-status { display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border:1px solid; border-radius:0; }
.qc-completion-status.is-incomplete { border-color:rgba(168,97,92,.38); background:rgba(168,97,92,.09); }
.qc-completion-status.is-ready { border-color:rgba(92,108,150,.35); background:rgba(92,108,150,.09); }
.qc-completion-icon { display:grid; place-items:center; width:22px; height:22px; flex:0 0 auto; border-radius:0; font-size:12px; font-weight:900; }
.qc-completion-status.is-incomplete .qc-completion-icon { background:rgba(168,97,92,.2); color:var(--warn); }
.qc-completion-status.is-ready .qc-completion-icon { background:rgba(92,108,150,.18); color:var(--ok); }
.qc-completion-status strong { color:var(--text); font-size:12px; }
.qc-completion-status ul { display:grid; gap:3px; margin:6px 0 0; padding-left:18px; color:var(--muted); font-size:11px; line-height:1.4; }
.qc-completion-status p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
html[data-theme="light"] .qc-completion-status.is-incomplete { border-color:#B99B57; background:#fff8e8; }
html[data-theme="light"] .qc-completion-status.is-ready { border-color:#C3BFB1; background:#eff9f1; }
html[data-theme="light"] .qc-completion-status strong { color:var(--aryvor-text); }
html[data-theme="light"] .qc-completion-status :is(ul,p) { color:var(--aryvor-muted); }
.qc-table-wrap {
max-height: 38vh;
overflow-y: auto;
}
.qc-check-table td { vertical-align: middle; }
.qc-check-table th,.qc-check-table td { text-align: left; }
.qc-check-table .qc-item-answer { text-align: left; }
/* Row status colors */
.qc-check-table tr.qc-row-no > td { background: rgba(168,97,92,0.10); }
.qc-check-table tr.qc-row-ok > td { background: rgba(92,108,150,0.10); }
.qc-check-table tr.qc-row-na > td { background: rgba(92,108,150,0.10); }
.qc-check-table .qc-item-row.qc-row-na .qc-item-text { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; }
.qc-check-table .qc-item-row.qc-row-na :is(.qc-acceptance,.qc-step-meta) { opacity:.72; }
.qc-item-text { font-size: 13px; line-height: 1.4; text-align: left !important; padding: 18px 20px 10px !important; }
.qc-check-table .qc-item-note-row td:first-child { width:auto !important; padding: 0 20px 18px !important; border-top: 0 !important; }
.qc-note-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.qc-step-note { display: block; box-sizing:border-box; width: 100% !important; min-width:100%; min-height: 62px; resize: vertical; text-align: left; }
.qc-evidence-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.qc-evidence-row .qc-evidence-input { flex: 1 1 320px; margin-top: 0; }
.qc-evidence-row .qc-evidence-upload { margin-top: 0; }
.qc-evidence-upload.is-disabled { pointer-events:none; opacity:.5; filter:grayscale(1); }
.qc-findings-row textarea { display: block; width: 100% !important; min-height: 90px; text-align: left; }
.qc-required { color: var(--critical); margin-right: 3px; font-weight: 700; }
/* Radio button group */
.qc-answer-group {
display: flex;
gap: 4px;
}
.qc-radio-label {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
border-radius:0;
border: 1.5px solid var(--line);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 120ms, border-color 120ms, color 120ms;
white-space: nowrap;
}
.qc-radio-label input { display: none; }
.qc-radio-label:hover { border-color: var(--accent); color: var(--accent); }
.qc-radio-yes { background: rgba(92,108,150,0.12); border-color: #6E8F6B; color: #6E8F6B; }
.qc-radio-no { background: rgba(168,97,92,0.10); border-color: #A8615C; color: #A8615C; }
.qc-radio-n\/a { background: rgba(92,108,150,0.10); border-color: #6E6D66; color: #6E6D66; }
html[data-theme="light"] .qc-meta-strip { border:1px solid var(--aryvor-border); background:#F7F6F1; }
html[data-theme="light"] .qc-meta-cell { border-color:var(--aryvor-border); }
html[data-theme="light"] .qc-meta-cell span { color:#6E6D66; }
html[data-theme="light"] .qc-meta-cell strong { color:var(--aryvor-text); }
html[data-theme="light"] .qc-meta-cell small { color:var(--aryvor-muted); }
html[data-theme="light"] .qc-check-table tr.qc-row-ok > td { background:#edf8f0 !important; }
html[data-theme="light"] .qc-check-table tr.qc-row-no > td { background:#fceff0 !important; }
html[data-theme="light"] .qc-check-table tr.qc-row-na > td { background:#f0f1f3 !important; }
/* Action buttons */
.qc-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding-top: 4px;
border-top: 1px solid var(--line);
}
.qc-btn-pass { background: var(--ok) !important; border-color: var(--ok) !important; }
.qc-btn-fail { background: var(--critical) !important; border-color: var(--critical) !important; color: #fff !important; }
/* ── Tray ↔ Cable relationship ───────────────────────────────── */
.tray-cables-btn {
font-size: 12px;
padding: 2px 8px;
}
/* Cable detail drawer — route visualisation */
.cable-route-panel {
padding: 10px 14px;
background: var(--surface-2, #f4f4f5);
border-radius:0;
margin: 8px 0;
display: flex;
flex-direction: column;
gap: 0;
}
.cable-route-step {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.cable-route-step:last-child { border-bottom: none; }
.cable-route-step strong { font-size: 13px; }
.cable-route-step small { font-size: 11px; color: var(--muted); margin-left: auto; }
.cable-route-arrow {
text-align: center;
font-size: 11px;
color: var(--muted);
line-height: 1;
padding: 0;
}
/* ═══════════════════════════════════════════════════════
PUNCH LIST MODULE
═══════════════════════════════════════════════════════ */
/* Filter bar */
.punch-page-header {
align-items: center;
gap: 14px;
}
.punch-title-summary {
display: flex;
align-items: baseline;
flex: 0 0 auto;
white-space: nowrap;
}
.punch-header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 9px;
min-width: 0;
flex: 1 1 auto;
}
.punch-filter-bar {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 5px;
margin: 0;
min-width: 0;
}
.punch-filter-bar .settings-select {
width: auto;
min-width: 104px;
max-width: 132px;
min-height: 28px;
height: 28px;
padding: 0 24px 0 8px;
font-size: 10px;
line-height: 1;
}
.punch-create-action {
min-height: 30px;
height: 30px;
padding: 0 11px;
font-size: 10px;
white-space: nowrap;
}
@media (max-width: 1180px) {
.punch-page-header { align-items: flex-start; }
.punch-header-actions { flex-wrap: wrap; }
.punch-filter-bar { flex: 1 1 100%; }
}
@media (max-width: 760px) {
.punch-page-header,
.punch-header-actions { align-items: stretch; flex-direction: column; }
.punch-filter-bar { justify-content: flex-start; }
.punch-filter-bar .settings-select { flex: 1 1 128px; max-width: none; }
.punch-create-action { align-self: flex-start; }
}
/* Table */
.punch-table .punch-title-cell { max-width: 220px; white-space: normal; line-height: 1.3; }
.punch-row { cursor: pointer; }
.punch-row:hover td { background: rgba(var(--primary-rgb, 59,130,246),0.06); }
/* Priority badge */
.punch-priority-badge {
display: inline-block;
padding: 2px 7px;
border-radius:0;
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
}
.punch-priority-badge.p1 { background: #fee2e2; color: #A8615C; }
.punch-priority-badge.p2 { background: #fef3c7; color: #92400e; }
.punch-priority-badge.p3 { background: #8496C2; color: #33405E; }
.punch-priority-badge.p4 { background: #f0fdf4; color: #6E8F6B; }
/* Progress cell */
.punch-progress-cell { display: flex; flex-direction: column; gap: 3px; min-width: 160px; }
.punch-mini-bar { height: 5px; background: var(--line); border-radius:0; overflow: hidden; }
.punch-mini-bar > div { height: 100%; border-radius:0; transition: width .3s; }
/* Report bar */
.punch-report-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.punch-header-actions > :is(.punch-filter-bar,.punch-create-action,.punch-columns-action) { margin-top:0 !important; margin-bottom:0 !important; }
.punch-header-actions :is(.settings-select,.filter-btn,.primary-action),
.punch-report-bar .filter-btn,
.punch-row-actions .filter-btn { min-height:30px; height:30px; box-sizing:border-box; margin:0; }
.punch-header-actions .punch-filter-bar { align-items:center; padding-block:8px !important; }
.punch-header-actions .punch-columns-action { align-self:center; }
.punch-report-bar { align-items:center; }
.punch-row-actions { align-items:center; }
/* ─── Drawer ─── */
.punch-drawer {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
overflow-y: auto;
}
.punch-drawer-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 6px;
}
.punch-drawer-title {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
margin: 0;
color: var(--text);
}
.punch-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
}
.punch-meta-grid > div { display: flex; flex-direction: column; }
.punch-meta-grid label { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.punch-meta-grid span { font-size: 12px; color: var(--text); }
.punch-section-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .7px;
color: var(--primary);
padding: 6px 0 2px;
border-bottom: 1px solid var(--line);
margin-top: 4px;
}
.punch-field-block label { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.punch-field-block p { font-size: 12px; margin: 2px 0 0; line-height: 1.5; }
.punch-email-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
padding: 4px 0;
border-bottom: 1px solid var(--line);
}
.punch-email-row span { flex: 1; }
/* Mail composer: Aryvor prepares the draft, the user's provider sends it. */
.modal:has(.mail-composer) { width:min(760px,calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; }
.mail-composer { display:grid; gap:14px; }
.mail-safety-note { display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.mail-safety-note>span { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); font-size:16px; }
.mail-safety-note strong { display:block; font-size:12px; }
.mail-safety-note p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.mail-fields { display:grid; gap:10px; }
.mail-fields label { display:grid; gap:5px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.mail-copy-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mail-fields textarea { min-height:220px; resize:vertical; font-family:inherit; line-height:1.5; text-transform:none; }
.mail-directory { border:1px solid var(--border); background:var(--surface-2); }
.mail-directory summary { padding:10px 12px; cursor:pointer; color:var(--text); font-size:11px; font-weight:700; }
.mail-directory summary span { float:right; color:var(--muted); }
.mail-contact-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:180px; padding:0 10px 10px; overflow:auto; }
.mail-contact-chip { min-width:0; padding:8px 9px; border:1px solid var(--border); background:var(--surface); color:var(--text); text-align:left; cursor:pointer; }
.mail-contact-chip:hover { border-color:var(--accent); }
.mail-contact-chip strong,.mail-contact-chip span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-contact-chip strong { font-size:11px; }.mail-contact-chip span { margin-top:2px; color:var(--muted); font-size:10px; }
.mail-validation { min-height:16px; color:var(--critical); font-size:11px; font-weight:700; }
.mail-actions,.rpt-cust-actions { display:flex; justify-content:flex-end; gap:8px; }
@media(max-width:620px){.mail-copy-grid,.mail-contact-list{grid-template-columns:1fr}.mail-fields textarea{min-height:180px}.mail-actions{position:sticky;bottom:0;padding-top:10px;background:var(--surface)}}
.punch-photo-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.punch-photo-thumb { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.punch-photo-thumb img { width: 80px; height: 60px; object-fit: cover; border-radius:0; border: 1px solid var(--line); }
.punch-photo-thumb small { font-size: 10px; color: var(--muted); }
.punch-drawer-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding-top: 8px;
margin-top: auto;
border-top: 1px solid var(--line);
}
/* ─── Timeline ─── */
.punch-timeline { display: flex; flex-direction: column; gap: 0; }
.punch-tl-entry {
display: flex;
gap: 8px;
position: relative;
padding-bottom: 10px;
}
.punch-tl-entry::before {
content: "";
position: absolute;
left: 7px;
top: 16px;
bottom: 0;
width: 2px;
background: var(--line);
}
.punch-tl-entry:last-child::before { display: none; }
.punch-tl-dot {
width: 16px;
height: 16px;
border-radius:0;
flex-shrink: 0;
margin-top: 2px;
border: 2px solid transparent;
}
.punch-tl-dot.open { background: var(--muted); border-color: var(--border); }
.punch-tl-dot.progress { background: var(--primary); border-color: var(--primary); }
.punch-tl-dot.warn { background: var(--warn, #A8615C); border-color: var(--warn, #A8615C); }
.punch-tl-dot.done { background: var(--ok); border-color: var(--ok); }
.punch-tl-content { flex: 1; min-width: 0; }
.punch-tl-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.punch-tl-header strong { font-size: 11px; }
.punch-tl-content p { font-size: 11px; margin: 0; color: var(--muted); line-height: 1.4; }
.punch-timeline-photo { width: 60px; height: 45px; object-fit: cover; border-radius:0; margin-top: 4px; margin-right: 4px; }
/* ─── Form ─── */
.punch-form { display: flex; flex-direction: column; gap: 10px; }
.punch-form-section {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
background: var(--surface, #f8fafc);
border-radius:0;
border: 1px solid var(--line);
}
.punch-form-section > strong { font-size: 12px; color: var(--primary); }
.punch-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.punch-form-row > label { flex: 1; min-width: 140px; }
.punch-form label {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 11px;
color: var(--muted);
font-weight: 600;
}
.punch-form .settings-select { width: 100%; }
.field-punch-context { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); }
.field-punch-context strong { color: var(--ink); font-size: 12px; }
.field-punch-context small { color: var(--muted); font-size: 10px; }
.field-punch-photo input[type="file"] { padding: 8px; border: 1px dashed var(--line); background: var(--surface-2); }
.punch-row-actions { display:flex; align-items:center; gap:5px; }
.punch-delete-action { border-color:color-mix(in srgb,var(--critical) 42%,var(--border)) !important; color:var(--critical) !important; }
.punch-delete-action:hover { background:color-mix(in srgb,var(--critical) 11%,transparent) !important; }
.punch-drawer-actions .punch-delete-action { margin-right:auto; }
html[data-theme="light"] .punch-delete-action { border-color:#A8615C !important; background:#fff7f8 !important; color:#A8615C !important; }
/* Punch item editor — current modal language */
.modal:has(.punch-form-modal) { width:min(760px,calc(100vw - 32px)); max-height:min(880px,calc(100vh - 32px)); padding:0; overflow:hidden; }
.modal:has(.punch-form-modal) .modal-head { margin:0; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal:has(.punch-form-modal) .modal-head h2 { font-size:21px; letter-spacing:-.02em; }
.modal:has(.punch-form-modal) #modalBody { min-height:0; }
.punch-form-modal { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:0; max-height:calc(100vh - 112px); }
.punch-form-scroll { min-height:0; padding:18px 22px 12px; overflow-y:auto; scrollbar-gutter:stable; }
.punch-form-intro { display:flex; align-items:flex-start; gap:11px; margin-bottom:14px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); border-radius:0; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.punch-form-intro>span { display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:0; background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); font-weight:900; }
.punch-form-intro strong { display:block; color:var(--text); font-size:12px; }
.punch-form-intro p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.punch-form-modal .punch-form-section { gap:11px; margin-bottom:12px; padding:15px; border-color:var(--border); border-radius:0; background:var(--surface-2); }
.punch-form-modal .punch-form-section>strong { display:flex; align-items:center; gap:8px; padding-bottom:9px; border-bottom:1px solid var(--border); color:var(--text); font-size:12px; }
.punch-form-modal .punch-form-section>strong>span { display:grid; place-items:center; width:24px; height:20px; border-radius:0; background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent); font-size:9px; letter-spacing:.04em; }
.punch-form-modal .punch-form-section>strong>small { margin-left:auto; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.punch-form-modal .punch-form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.punch-form-modal .punch-form-row>label { min-width:0; }
.punch-form-modal label { gap:5px; color:var(--muted); font-size:10px; letter-spacing:.02em; }
.punch-form-modal .settings-select { box-sizing:border-box; min-height:38px; border-radius:0; }
.punch-form-modal textarea.settings-select { padding-block:9px; line-height:1.45; resize:vertical; }
.punch-form-actions { display:flex; justify-content:flex-end; gap:9px; padding:14px 22px 17px; border-top:1px solid var(--border); background:var(--surface); box-shadow:none; }
html[data-theme="light"] .punch-form-intro { border-color:rgba(92,108,150,.24); background:#f6f4fb; }
html[data-theme="light"] .punch-form-intro strong { color:var(--aryvor-text); }
html[data-theme="light"] .punch-form-modal .punch-form-section { border-color:var(--aryvor-border); background:#F7F6F1; }
html[data-theme="light"] .punch-form-modal .punch-form-section>strong { border-color:var(--aryvor-border); color:var(--aryvor-text); }
html[data-theme="light"] .punch-form-actions { border-color:var(--aryvor-border); background:#fff; }
@media(max-width:620px){.modal:has(.punch-form-modal){width:calc(100vw - 18px);max-height:calc(100vh - 18px)}.modal:has(.punch-form-modal) .modal-head,.punch-form-actions{padding-inline:14px}.punch-form-scroll{padding-inline:14px}.punch-form-modal .punch-form-row{grid-template-columns:1fr}}
/* ─── Material shortage block ──────────────────────────────────────────────── */
.mat-block-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius:0;
border: 1px solid var(--line);
background: transparent;
color: var(--muted);
font-size: 10px;
cursor: pointer;
margin-right: 5px;
flex-shrink: 0;
vertical-align: middle;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mat-block-btn:hover { border-color: var(--primary); color: var(--primary); }
.mat-block-btn.mat-block-active {
background: #fef3c7;
border-color: #A8615C;
color: #92400e;
font-size: 11px;
}
.mat-block-btn.mat-block-active:hover { background: #fde68a; }
/* Summary modal */
.mat-block-summary { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.mat-block-alert-banner {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fef3c7;
border: 1px solid #A8615C;
border-radius:0;
padding: 12px 14px;
}
.mat-block-alert-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.mat-block-alert-banner strong { display: block; font-size: 13px; color: #92400e; }
.mat-block-alert-banner small { font-size: 11px; color: #A8615C; }
.mat-block-section { display: flex; flex-direction: column; gap: 4px; }
.mat-block-section-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mat-missing-list { margin: 0; padding-left: 16px; }
.mat-missing-list li { font-size: 12px; margin: 2px 0; }
.mat-custom-desc { margin: 0; font-size: 12px; white-space: pre-wrap; color: var(--text); }
/* Supervisor chip */
.mat-supervisor-chip {
display: inline-flex;
flex-wrap: wrap;
gap: 4px 8px;
align-items: center;
background: var(--surface);
border: 1px solid var(--line);
border-radius:0;
padding: 4px 10px;
font-size: 12px;
}
.mat-supervisor-chip strong { font-size: 12px; }
.mat-supervisor-chip small { color: var(--muted); font-size: 11px; }
/* Form */
.mat-block-form .punch-form-section {
gap: 8px;
background: var(--surface, #f8fafc);
}
.mat-block-form .punch-form-section h4 {
margin: 0 0 6px;
font-size: 11px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.mat-block-form textarea[name="customDescription"] {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--line);
border-radius:0;
padding: 8px 10px;
font-size: 12px;
font-family: inherit;
resize: vertical;
background: var(--bg, #fff);
color: var(--text);
}
.mat-block-form textarea[name="customDescription"]:focus {
outline: none;
border-color: var(--primary);
box-shadow:none;
}
.mat-block-form .annex-upload-label {
width: 100%;
box-sizing: border-box;
justify-content: center;
border: 1.5px dashed var(--line);
border-radius:0;
padding: 10px;
font-size: 12px;
color: var(--muted);
background: var(--bg, #fff);
}
.mat-catalog-list {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 240px;
overflow-y: auto;
border: 1px solid var(--line);
border-radius:0;
padding: 4px;
background: var(--bg, #fff);
}
/* Override the column-filter .filter-check defaults inside the material list */
.mat-catalog-list .filter-check {
align-items: flex-start;
gap: 10px;
padding: 7px 8px;
border-radius:0;
min-height: unset;
font-weight: 400;
}
.mat-catalog-list .filter-check:hover { background: var(--hover); }
.mat-catalog-list .filter-check input[type="checkbox"] {
margin-top: 2px; /* align with first line of text */
flex-shrink: 0;
width: 15px;
height: 15px;
accent-color: var(--primary);
cursor: pointer;
}
.mat-catalog-list .filter-check span {
/* reset column-filter overrides */
white-space: normal;
overflow: visible;
text-overflow: unset;
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12px;
color: var(--text);
line-height: 1.4;
}
.mat-catalog-list .filter-check span strong {
font-size: 12px;
color: var(--text);
}
.mat-catalog-list .filter-check span small {
font-size: 11px;
color: var(--muted);
}
.mat-catalog-list .filter-check:has(input:checked) {
background: #F7F6F1;
border-radius:0;
}
.mat-catalog-list .filter-check:has(input:checked) span strong {
color: var(--primary);
}
.mat-already-missing {
display: inline-block;
font-size: 10px;
color: #A8615C;
font-style: normal;
font-weight: 600;
background: #fee2e2;
border-radius:0;
padding: 1px 5px;
width: fit-content;
}
/* ─── Cable stock table ──────────────────────────────────────────────────────── */
.stock-bar-cell { min-width: 140px; }
.stock-usage-bar {
height: 6px;
background: var(--line);
border-radius:0;
overflow: hidden;
margin-bottom: 3px;
}
.stock-usage-fill {
height: 100%;
border-radius:0;
transition: width 0.3s;
}
.stock-usage-fill.done { background: var(--done, #6E8F6B); }
.stock-usage-fill.warn { background: #A8615C; }
.stock-usage-fill.critical { background: var(--critical, #A8615C); }
.section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
/* ─── Punch list firm alert ─────────────────────────────────────────────────── */
.punch-firm-alert-banner {
background: color-mix(in srgb, var(--warn, #A8615C) 12%, var(--surface));
border: 1px solid var(--warn, #A8615C);
border-radius:0;
padding: 10px 14px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
gap: 3px;
}
.punch-firm-alert-banner strong { font-size: 12px; color: var(--ink); }
.punch-firm-alert-banner small { font-size: 11px; color: var(--warn, #A8615C); }
tr.punch-firm-alert { background: #fffbeb !important; }
tr.punch-firm-alert:hover { background: #fef3c7 !important; }
.punch-alert-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
color: #92400e;
background: #fde68a;
border-radius:0;
padding: 1px 5px;
margin-left: 4px;
}
/* Firm inline edit form */
.punch-firm-edit-form {
background: #F7F6F1;
border: 1px solid #8496C2;
border-radius:0;
padding: 10px 12px;
margin-bottom: 8px;
}
.punch-firm-accept-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
margin-bottom: 4px;
}
.punch-firm-accept-row input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: var(--primary);
cursor: pointer;
}
.punch-firm-edit-form .punch-form-row label {
font-size: 11px;
color: var(--muted);
font-weight: 600;
display: flex;
flex-direction: column;
gap: 3px;
}
/* Firm select in sidebar */
#activeFirmSelect {
width: 100%;
border: 1px solid var(--line);
border-radius:0;
padding: 5px 8px;
font-size: 12px;
background: var(--bg, #fff);
color: var(--text);
}
/* ── Login overlay ──────────────────────────────────────────────────────────── */
.login-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(3px);
}
.login-card {
background: var(--surface, #fff);
border-radius:0;
padding: 40px 36px 32px;
width: 360px;
box-shadow:none;
display: flex;
flex-direction: column;
gap: 20px;
}
.login-brand {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 700;
color: var(--text);
}
.login-brand-icon {
width: 36px;
height: 36px;
border-radius:0;
background: var(--primary, #5C6C96);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 800;
}
.login-card h2 {
margin: 0;
font-size: 22px;
font-weight: 700;
color: var(--text);
}
.login-card form {
display: flex;
flex-direction: column;
gap: 14px;
}
.login-card label {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .4px;
}
.login-card input[type="email"],
.login-card input[type="password"] {
padding: 10px 12px;
border: 1.5px solid var(--line);
border-radius:0;
font-size: 14px;
background: var(--bg, #fff);
color: var(--text);
outline: none;
transition: border-color .15s;
}
.login-card input:focus {
border-color: var(--primary, #5C6C96);
}
.login-card .primary-action {
margin-top: 4px;
padding: 11px;
font-size: 14px;
font-weight: 600;
border-radius:0;
}
.login-error {
color: var(--critical, #A8615C);
font-size: 13px;
font-weight: 500;
padding: 8px 10px;
background: rgba(168,97,92,.08);
border-radius:0;
}
.login-hint {
font-size: 11.5px;
color: var(--muted);
margin: 0;
line-height: 1.5;
}
.login-hint code {
background: var(--line);
border-radius:0;
padding: 1px 4px;
font-size: 11px;
}
/* ── Sidebar user card (logged-in state) ────────────────────────────────────── */
.user-info-card {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0 10px;
}
.user-avatar-lg {
width: 38px;
height: 38px;
border-radius:0;
background: var(--primary, #5C6C96);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.user-info-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.user-info-text strong {
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-info-text small {
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.role-scope-user {
font-size: 11px;
color: var(--primary, #5C6C96);
font-weight: 600;
}
.logout-btn {
width: 100%;
padding: 7px 10px;
border: 1.5px solid var(--line);
border-radius:0;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: border-color .15s, color .15s;
}
.logout-btn:hover {
border-color: var(--critical, #A8615C);
color: var(--critical, #A8615C);
}
/* ── User management view ───────────────────────────────────────────────────── */
.user-avatar-sm {
width: 30px;
height: 30px;
border-radius:0;
background: var(--primary, #5C6C96);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
.role-badge {
display: inline-block;
padding: 2px 8px;
border-radius:0;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.badge-cm { background: rgba(92,108,150,.12); color: #5C6C96; }
.badge-wgl { background: rgba(92,108,150,.12); color: #6E8F6B; }
.badge-es { background: rgba(168,97,92,.12); color: #A8615C; }
.badge-qa { background: rgba(92,108,150,.12); color: #6E6D66; }
tr.user-row-self td { background: rgba(92,108,150,.04); }
.user-creds-list {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
overflow-y: auto;
max-height: 520px;
}
.user-cred-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px;
border-radius:0;
background: var(--bg, #F7F6F1);
border: 1px solid var(--line);
}
.user-cred-row > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.user-cred-row strong { font-size: 12px; }
.user-cred-row small { font-size: 11px; color: var(--muted); }
.user-cred-row code { font-size: 10.5px; background: var(--line); border-radius:0; padding: 1px 4px; }
/* ── Users view tabs ────────────────────────────────────────────────────────── */
.users-tabs {
display: flex;
gap: 4px;
padding: 12px 16px 0;
border-bottom: 1px solid var(--line);
margin-bottom: 0;
}
.users-tab {
padding: 7px 16px;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--muted);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border-radius:0;
transition: color .15s, border-color .15s;
}
.users-tab:hover { color: var(--text); }
.users-tab.active {
color: var(--primary, #5C6C96);
border-bottom-color: var(--primary, #5C6C96);
}
.users-command-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
margin: 0 0 8px;
padding: 7px 16px 3px;
box-sizing: border-box;
}
.users-command-bar .primary-action {
margin-left: auto !important;
transform: translateY(-4px);
white-space: nowrap;
}
.roles-command-bar { flex-wrap: wrap; }
/* ── Permission matrix ──────────────────────────────────────────────────────── */
.perm-matrix-wrap { max-height: 620px; overflow: auto; }
.perm-matrix { border-collapse: collapse; font-size: 12px; }
.perm-matrix th { position: sticky; top: 0; background: var(--surface,#fff); z-index: 2; }
.perm-matrix td, .perm-matrix th { padding: 5px 8px; border: 1px solid var(--line); }
/* Safety Function Test — Cause & Effect grid, reuses .perm-matrix's sticky-
header table idiom (causes as rows, functions as columns). */
.safety-matrix-wrap { max-height: 620px; overflow: auto; }
.safety-matrix-table .safety-matrix-corner { position: sticky; left: 0; top: 0; z-index: 3; background: var(--surface); }
.safety-matrix-table .safety-matrix-row-hd { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; white-space: nowrap; }
.safety-matrix-table .safety-matrix-row-hd small { display: block; color: var(--muted); font-weight: 400; }
.safety-matrix-cell { text-align: center; color: var(--muted); }
.safety-matrix-cell.is-linked { background: color-mix(in srgb, var(--accent, #8496C2) 16%, var(--surface)); color: var(--ink); font-weight: 800; }
.safety-matrix-cell-btn { width: 100%; height: 100%; min-height: 28px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.safety-matrix-cell.is-pass { background: color-mix(in srgb, var(--ok, #6E8F6B) 22%, var(--surface)); color: var(--ok, #6E8F6B); }
.safety-matrix-cell.is-fail { background: color-mix(in srgb, var(--critical, #A8615C) 22%, var(--surface)); color: var(--critical, #A8615C); }
.safety-device-list, .safety-cause-list { display: flex; flex-direction: column; gap: 8px; }
.safety-device-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 12px; align-items: end; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); }
.safety-device-row-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.safety-cause-list ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.safety-cause-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.io-check-summary .filter-btn.small { padding: 2px 8px; font-size: 11px; }
@media (max-width: 700px) {
.safety-device-row { grid-template-columns: 1fr; }
}
.perm-col-hd {
font-size: 11px;
font-weight: 700;
text-align: center;
min-width: 110px;
white-space: nowrap;
}
.perm-group-row td {
background: var(--bg, #F7F6F1);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--muted);
padding: 6px 8px;
}
.perm-view-label { font-size: 12px; white-space: nowrap; }
.perm-none { color: var(--muted); text-align: center; font-size: 11px; }
.perm-read { color: #A8615C; text-align: center; font-size: 11px; font-weight: 600; }
.perm-write { color: #6E8F6B; text-align: center; font-size: 11px; font-weight: 600; }
.perm-select {
width: 90px;
font-size: 11px;
padding: 2px 4px;
border: 1px solid var(--line);
border-radius:0;
background: var(--bg,#fff);
color: var(--text);
}
.perm-type-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.perm-del-btn {
margin-left: 6px;
font-size: 10px;
color: var(--critical, #A8615C);
background: none;
border: none;
cursor: pointer;
padding: 1px 3px;
border-radius:0;
}
.perm-del-btn:hover { background: rgba(168,97,92,.1); }
/* ── Template editor ────────────────────────────────────────────────────────── */
.tmpl-banner {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
background: var(--bg, #F7F6F1);
}
.tmpl-chip {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1.5px solid var(--line);
border-radius:0;
background: var(--surface, #fff);
color: var(--text);
font-size: 12px;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.tmpl-chip strong { font-size: 15px; font-weight: 700; }
.tmpl-chip-type {
font-size: 10px;
color: var(--muted);
font-weight: 500;
margin-left: 2px;
}
.tmpl-chip:hover { border-color: var(--primary, #5C6C96); }
.tmpl-chip.active {
border-color: var(--primary, #5C6C96);
background: rgba(92,108,150,.06);
color: var(--primary, #5C6C96);
}
.tmpl-chip.active .tmpl-chip-type { color: var(--primary, #5C6C96); opacity: .7; }
.tmpl-editor { display: flex; flex-direction: column; }
.tmpl-section { border-bottom: 1px solid var(--line); }
.tmpl-section-hd {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 13px 16px;
background: transparent;
border: none;
text-align: left;
cursor: pointer;
font-size: 13px;
color: var(--text);
transition: background .12s;
}
.tmpl-section-hd:hover { background: var(--bg, #F7F6F1); }
.tmpl-section.open > .tmpl-section-hd { background: rgba(92,108,150,.04); }
.tmpl-section-arrow { font-size: 11px; color: var(--muted); width: 12px; }
.tmpl-section-hd strong { font-size: 13px; font-weight: 700; }
.tmpl-section-type {
font-size: 11px;
color: var(--muted);
background: var(--bg, #f3f4f6);
border-radius:0;
padding: 1px 8px;
}
.tmpl-section-count {
font-size: 11px;
color: var(--muted);
}
.tmpl-section-spacer { flex: 1; }
.tmpl-section-body { padding: 0 16px 16px; }
.tmpl-section-body .template-table { width: 100%; }
/* ── Productivity dashboard (WGL) ───────────────────────────────────────── */
.kpi-val { font-size: 28px; font-weight: 700; display: block; }
.kpi-val small { font-size: 13px; font-weight: 400; margin-left: 6px; color: var(--muted); }
.kpi-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.prod-chart-wrap { padding: 12px 16px 0; overflow-x: auto; }
.prod-chart { display: block; min-width: 340px; }
.chart-score { font-size: 9px; fill: var(--accent); font-weight: 700; }
.chart-wlabel { font-size: 9px; fill: var(--muted); }
.chart-ytick { font-size: 8px; fill: var(--muted); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 12px; }
.chart-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.chart-legend-dot { width: 8px; height: 8px; border-radius:0; display: inline-block; }
.prod-breakdown { overflow-x: auto; padding: 0 4px 8px; }
.prod-daily-form { padding: 12px 16px; }
.prod-daily-hint { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.prod-field { margin-bottom: 8px; }
.prod-field label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.prod-field input.settings-select { margin-top: 2px; }
.prod-up { color: #6E8F6B; }
.prod-down { color: #A8615C; }
/* ── Workforce view ─────────────────────────────────────────────────────── */
.wf-firm-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 4px; }
.wf-firm-tab { padding: 4px 14px; border-radius:0; border: 1px solid var(--border); background: var(--surface); font-size: 12px; cursor: pointer; transition: .15s; }
.wf-firm-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.wf-firm-tab:hover:not(.active) { background: var(--bg); }
.wf-form-card { margin: 12px 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius:0; }
.wf-form-card h4 { margin: 0 0 10px; font-size: 13px; }
.wf-form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.wf-form-row label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); flex: 1 1 120px; }
.wf-form-row input,.wf-form-row select { min-height:38px; padding:8px 10px; border:1px solid var(--border); border-radius:0; font-size:13px; line-height:20px; background:var(--surface); width:100%; box-sizing:border-box; }
.wf-form-row select { appearance:auto; }
.wf-form-row .primary-action { min-height:38px; padding:8px 18px; flex:0 0 auto; }
.wf-table-wrap { overflow-x: auto; padding: 0 4px 12px; }
.wf-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wf-table th { background: var(--bg, #F7F6F1); padding: 7px 10px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.wf-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.wf-table td small { display: block; font-size: 10px; color: var(--muted); }
.wf-table td strong { font-weight: 600; }
.wf-table tr:hover td { background: rgba(92,108,150,.03); }
.wf-current-week td { background: rgba(92,108,150,.05); }
.wf-badge { font-size: 9px; background: var(--accent); color: #fff; border-radius:0; padding: 1px 7px; vertical-align: middle; margin-left: 4px; }
.wf-actions { display: flex; gap: 4px; }
.icon-btn.danger { color: #A8615C; }
.icon-btn.danger:hover { background: #fef2f2; }
/* Workforce side panel */
.wf-side-content { padding: 10px 14px; }
.wf-spark-block { margin-bottom: 16px; }
.wf-spark-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 4px; }
.wf-sparkline { display: block; overflow: visible; }
.wf-summary-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.wf-stat { background: var(--surface); border: 1px solid var(--border); border-radius:0; padding: 10px; text-align: center; }
.wf-stat span { display: block; font-size: 22px; font-weight: 700; color: var(--accent); }
.wf-stat small { font-size: 10px; color: var(--muted); }
/* ── Chart v2 (WGL dashboard) ───────────────────────────────────────────── */
.chart-bar-score { font-size: 10px; font-weight: 700; }
.chart-people-badge { font-size: 10px; font-weight: 600; fill: #5C6C96; }
.chart-wlabel { font-size: 10px; fill: var(--muted); font-weight: 500; }
.chart-wlabel-cur { fill: #5C6C96; font-weight: 700; }
.chart-ppu { font-size: 9px; fill: #8496C2; }
.chart-color-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0 10px; font-size: 11px; color: var(--muted); }
.chart-color-legend span { display: flex; align-items: center; gap: 5px; }
/* ── Materials view ──────────────────────────────────────────────────────── */
.mat-tabs { display:flex; align-items:center; gap:6px; padding:12px 16px 0; border-bottom:1px solid var(--border); }
.mat-tab { min-height:38px; padding:7px 14px; border-radius:0; border:1px solid transparent; background:none; font-size:13px; font-weight:500; cursor:pointer; color:var(--muted); display:flex; align-items:center; gap:8px; }
.mat-tab.active { background:var(--surface); border-color:var(--border); border-bottom-color:var(--surface); color:var(--fg); }
.mat-tab-badge { background:#A8615C; color:#fff; border-radius:0; font-size:10px; padding:0 5px; }
.mat-tab-icon { width:18px; height:18px; flex:0 0 18px; color:currentColor; }
.mat-tab.active .mat-tab-icon { color:var(--accent); }
.mat-import-btn { min-height:34px; padding:6px 12px; border-radius:0; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:12px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.mat-import-btn .mat-tab-icon { width:17px; height:17px; flex-basis:17px; color:var(--accent); }
.mat-import-btn:hover { background:var(--bg); }
/* Alert section */
.mat-alert-section { margin:12px 16px; border:1px solid var(--border); border-radius:0; overflow:hidden; }
.mat-usage-button { border-color:color-mix(in srgb,var(--warn) 42%,var(--border)) !important; color:var(--warn) !important; font-weight:900; }
.material-usage-register-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:14px 16px 10px; padding:14px 16px; border:1px solid var(--border); border-radius:0; background:var(--surface-2); }
.material-usage-register-head>div { display:grid; gap:3px; }
.material-usage-register-head strong { color:var(--text); font-size:13px; }
.material-usage-register-head small { color:var(--muted); }
.material-usage-table { min-width:1240px; }
.material-usage-table td:nth-child(2) small,.material-usage-table td:nth-child(8) small { display:block; margin-top:2px; color:var(--muted); font-size:10px; }
.modal:has(.material-usage-form) { width:min(720px,calc(100vw - 32px)); }
.material-usage-form { display:grid; gap:13px; }
.material-usage-form>label,.material-usage-grid label { display:grid; gap:5px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.material-usage-form .settings-select { width:100%; box-sizing:border-box; min-height:39px; border-radius:0; text-transform:none; }
.material-usage-form textarea.settings-select { padding-block:9px; line-height:1.45; resize:vertical; }
.material-usage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.material-usage-intro { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); border-radius:0; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.material-usage-intro>span { display:grid; place-items:center; width:25px; height:25px; flex:0 0 auto; border-radius:0; background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); font-size:18px; font-weight:800; }
.material-usage-intro strong { display:block; color:var(--text); font-size:12px; }
.material-usage-intro p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.material-usage-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:12px; border-top:1px solid var(--border); }
html[data-theme="light"] .material-usage-register-head { border-color:var(--aryvor-border); background:#F7F6F1; }
html[data-theme="light"] .material-usage-register-head strong,.material-usage-intro strong { color:var(--aryvor-text); }
html[data-theme="light"] .material-usage-intro { border-color:rgba(92,108,150,.24); background:#f6f4fb; }
@media(max-width:620px){.material-usage-register-head{align-items:flex-start;flex-direction:column}.material-usage-grid{grid-template-columns:1fr}}
.mat-alert-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--bg); border-bottom:1px solid var(--border); }
.mat-alert-title { font-size:13px; font-weight:600; }
.mat-alert-count { display:inline-block; background:#A8615C; color:#fff; border-radius:0; font-size:11px; padding:1px 8px; margin-left:6px; }
.mat-alert-table { width:100%; border-collapse:collapse; font-size:12px; }
.mat-alert-table td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.mat-alert-row:last-child td { border-bottom:none; }
.mat-alert-critical { background:rgba(168,97,92,.04); }
.mat-alert-warning { background:rgba(168,97,92,.04); }
.mat-alert-resolved td { opacity:.5; }
.mat-alert-badge { font-size:10px; border-radius:0; padding:2px 8px; font-weight:600; }
.mat-alert-badge.open { background:#fef2f2; color:#A8615C; }
.mat-alert-badge.ack { background:#fffbeb; color:#A8615C; }
.mat-alert-badge.resolved { background:#f0fdf4; color:#6E8F6B; }
.mat-alert-actions { display:flex; gap:4px; white-space:nowrap; }
.mat-filter-select { padding:4px 8px; border:1px solid var(--border); border-radius:0; font-size:12px; background:var(--surface); }
/* Materials table */
.mat-table-wrap { overflow-x:auto; padding:0 4px 12px; }
.mat-table { width:100%; border-collapse:collapse; font-size:12px; }
.mat-table th { background:var(--bg); padding:7px 10px; text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap; }
.mat-table td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.mat-table td small { display:block; font-size:10px; color:var(--muted); }
.mat-row:hover td { background:rgba(92,108,150,.025); }
.mat-row-expanded td { background:rgba(92,108,150,.04); }
/* Progress bar inside table */
.mat-bar-wrap { height:6px; background:var(--border); border-radius:0; width:90px; margin-bottom:2px; }
.mat-bar { height:6px; border-radius:0; }
.mat-bar-ok { background:#6E8F6B; }
.mat-bar-warn { background:#A8615C; }
.mat-bar-critical { background:#A8615C; }
/* Status classes */
.mat-ok { color:#6E8F6B; }
.mat-warn { color:#A8615C; }
.mat-critical { color:#A8615C; font-weight:600; }
/* Section badge */
.mat-section { background:var(--accent); color:#fff; border-radius:0; font-size:10px; padding:2px 8px; font-weight:600; }
/* Replenishment sub-rows */
.mat-rep-group td { padding:0; background:rgba(92,108,150,.03); border-bottom:1px solid var(--border); }
.mat-rep-table { width:100%; border-collapse:collapse; font-size:11px; }
.mat-rep-row td { padding:6px 14px; border-bottom:1px solid rgba(92,108,150,.1); color:var(--muted); }
.mat-rep-row:last-child td { border-bottom:none; }
.mat-reel-section { display:flex; flex-direction:column; gap:16px; padding:14px; }
.mat-reel-block { display:flex; flex-direction:column; gap:6px; min-width:0; overflow-x:auto; }
.mat-reel-block > strong { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.mat-reel-block table { width:100%; border-collapse:collapse; font-size:12px; }
.mat-reel-block th { text-align:left; padding:5px 8px; color:var(--muted); font-size:10px; text-transform:uppercase; }
.mat-reel-block td { padding:5px 8px; border-bottom:1px solid rgba(92,108,150,.1); }
/* ── Admin / Supervisor dashboard ───────────────────────────────────────── */
/* Alert strip */
.dash-alert-strip {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; margin-bottom: 16px;
background: rgba(168,97,92,.07); border: 1px solid rgba(168,97,92,.22);
border-radius:0; overflow-x: auto;
}
.dash-alert-label { font-weight: 800; font-size: 14px; color: #A8615C; flex-shrink: 0; }
.dash-alert-chip {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px; border-radius:0;
font-size: 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
transition: opacity .15s;
}
.dash-alert-chip:hover { opacity: .8; }
.dash-alert-chip-critical { background: rgba(168,97,92,.13); border: 1px solid rgba(168,97,92,.35); }
.dash-alert-chip-high, .dash-alert-chip-delayed { background: rgba(168,97,92,.13); border: 1px solid rgba(168,97,92,.35); }
.dash-alert-chip-warning { background: rgba(168,97,92,.1); border: 1px solid rgba(168,97,92,.25); }
.dash-alert-chip strong { font-weight: 700; color: var(--fg); }
.dash-alert-chip small { color: var(--muted); font-size: 10px; }
/* Forecast panel + baseline/actual/forecast curve */
.dash-forecast-row {
display: grid; grid-template-columns: 320px 1fr; gap: 12px; margin-bottom: 16px;
}
.dash-forecast-panel, .dash-scurve-panel {
background: var(--module); border: 1px solid var(--border); border-radius: 0;
padding: 18px 20px;
}
.dash-forecast-date { font-size: 30px; font-weight: 800; line-height: 1.05; margin: 8px 0 12px; }
.dash-forecast-pill {
display: inline-flex; font-size: 11px; font-weight: 700; padding: 4px 10px;
border: 1px solid var(--border); color: var(--muted); margin-bottom: 16px;
}
.dash-forecast-pill.risk { border-color: rgba(168,97,92,.4); color: var(--critical); }
.dash-forecast-pill.good { border-color: rgba(110,143,107,.4); color: var(--ok); }
.dash-forecast-stats { display: flex; flex-direction: column; gap: 10px; }
.dash-forecast-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--muted); }
.dash-forecast-stats b { color: var(--fg); font-size: 13px; }
.dash-forecast-stats b.risk { color: var(--critical); }
.dash-forecast-stats b.warning { color: var(--warn); }
.dash-forecast-stats b.good { color: var(--ok); }
.dash-scurve-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dash-scurve-legend { display: flex; gap: 12px; font-size: 10.5px; color: var(--muted); }
.dash-scurve-legend span::before { content: ""; display: inline-block; width: 10px; height: 2px; margin-right: 5px; vertical-align: middle; background: currentColor; }
.dash-scurve-legend .baseline { color: var(--muted); }
.dash-scurve-legend .actual { color: var(--accent); }
.dash-scurve-legend .cone::before { height: 8px; opacity: .35; }
.dash-scurve-panel svg { width: 100%; height: auto; display: block; }
.scurve-grid { stroke: var(--border); stroke-width: 1; }
.scurve-baseline { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .7; }
.scurve-actual { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.scurve-cone { fill: var(--accent); opacity: .14; stroke: none; }
.scurve-today-line { stroke: var(--border); stroke-dasharray: 2 3; }
.scurve-today-dot { fill: var(--module); stroke: var(--accent); stroke-width: 2.4; }
.dash-scurve-caption { font-size: 10.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.dash-scurve-caption b { color: var(--fg); font-weight: 600; }
.dash-scurve-caption b.risk { color: var(--critical); }
.dash-scurve-caption b.good { color: var(--ok); }
@media (max-width: 900px) { .dash-forecast-row { grid-template-columns: 1fr; } }
/* Dashboard card — the shared box for every panel below the forecast row.
Deliberately its own class, not the page-level .panel (large padding,
transparent background, meant for the whole-view wrapper). */
.dash-card {
background: var(--module); border: 1px solid var(--border); border-radius: 0;
padding: 16px 18px;
}
.dash-panel-title {
font-size: 11px; font-weight: 800; color: var(--muted);
text-transform: uppercase; letter-spacing: .07em;
}
.dash-panel-sub { font-size: 10.5px; color: var(--muted); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
/* Completion by activity: one big donut + six activity rings, each with a
+/-pt caption versus that activity's own baseline-today %. */
.completion-body { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.donut-hero { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-right: 26px; border-right: 1px solid var(--border); }
.donut-wrap { position: relative; width: 140px; height: 140px; }
.donut-wrap svg { width: 100%; height: 100%; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-center b { font-size: 26px; font-weight: 800; color: var(--fg); }
.donut-center span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.donut-caption { font-size: 10.5px; color: var(--muted); text-align: center; max-width: 150px; }
.donut-caption b { color: var(--fg); font-weight: 700; }
.activity-rings { flex: 1 1 420px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
.a-ring { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 74px; }
.a-ring .ring-wrap { position: relative; width: 70px; height: 70px; }
.a-ring .ring-wrap svg { width: 100%; height: 100%; }
.a-ring .ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--fg); }
.a-ring .lbl { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; text-align: center; }
.a-ring .delta { font-size: 10.5px; font-weight: 700; }
@media (max-width: 900px) { .donut-hero { border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 16px; width: 100%; } }
.row-secondary { display: grid; grid-template-columns: 1.15fr 1fr 0.95fr; gap: 14px; }
@media (max-width: 1100px) { .row-secondary { grid-template-columns: 1fr; } }
/* Areas against baseline: per-area mini bar chart, not a status heatmap. */
.area-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.area-row + .area-row { margin-top: 14px; }
.area-row .id { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.area-row .id b { font-size: 13px; font-weight: 700; }
.area-row .id span { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-row .delta { font-size: 12px; font-weight: 700; flex: none; }
.area-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.area-bar { height: 26px; background: var(--border); position: relative; }
.area-bar .fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bar-color, var(--accent)); }
.area-bar .tick { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--fg); opacity: .6; }
.area-axis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 4px; }
.area-axis span { font-size: 8px; color: var(--muted); text-align: center; letter-spacing: .02em; }
/* On site now: dot-matrix presence + per-contractor bars, honestly labeled
by recorded week (there is no daily attendance record to show "today"). */
.onsite-hd .sub { font-size: 10px; color: var(--muted); line-height: 1.4; display: inline-block; margin-top: 4px; }
.onsite-num { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 8px; }
.onsite-num b { font-size: 30px; font-weight: 800; color: var(--fg); }
.onsite-num span { font-size: 11.5px; color: var(--muted); }
.dot-matrix { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.dot-matrix i { width: 6px; height: 6px; background: var(--border); }
.dot-matrix i.on { background: var(--accent); }
.contractor { padding: 8px 0; border-top: 1px solid var(--border); }
.contractor:first-of-type { border-top: none; }
.contractor .top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.contractor .top span { color: var(--muted); }
.contractor .track { height: 6px; background: var(--border); position: relative; }
.contractor .track .fill { position: absolute; inset: 0; }
.contractor .pct { font-size: 10.5px; float: right; margin-top: 4px; }
/* Why the forecast is behind — reframed from "what moved" (no historical
forecast snapshot exists to compute a true delta), same card list shape. */
.moved-card { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; gap: 12px; }
.moved-card:last-child { border-bottom: none; }
.moved-card .d {
flex: none; align-self: flex-start; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
padding: 2px 7px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.moved-card .d.bad { border-color: rgba(168,97,92,.4); color: var(--critical); }
.moved-card .d.good { border-color: rgba(110,143,107,.4); color: var(--ok); }
.moved-card .txt strong { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
.moved-card .txt p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
/* ── Report styles ───────────────────────────────────────────────────────── */
/* Uses explicit rgba values instead of --border/--muted which are too faint in light mode */
/* Tabs */
.rpt-tabs {
display: flex; gap: 6px;
padding: 0 0 18px;
border-bottom: 2px solid rgba(0,0,0,.13);
margin-bottom: 24px;
}
.rpt-tab {
padding: 9px 24px; border-radius:0; font-size: 13px; font-weight: 700;
background: none; border: 2px solid rgba(0,0,0,.18); cursor: pointer; color: var(--fg);
transition: background .15s, color .15s, border-color .15s;
}
.rpt-tab.active {
background: var(--accent); color: #fff; border-color: var(--accent);
box-shadow:none;
}
.rpt-tab:hover:not(.active) { background: rgba(0,0,0,.04); border-color: var(--accent); }
.rpt-doc { display: flex; flex-direction: column; }
/* Date nav */
.rpt-date-nav {
display: flex; align-items: center; gap: 14px;
padding: 14px 0 26px;
}
.rpt-nav-btn {
width: 38px; height: 38px; border-radius:0;
border: 2px solid rgba(0,0,0,.18);
background: var(--module); font-size: 22px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center; color: var(--fg);
font-weight: 700; flex-shrink: 0;
}
.rpt-nav-btn:hover { background: rgba(0,0,0,.05); border-color: var(--accent); }
.rpt-date-label { flex: 1; text-align: center; }
.rpt-date-label strong { display: block; font-size: 17px; font-weight: 800; color: var(--fg); }
.rpt-date-label small { display: block; font-size: 12px; margin-top: 2px; color: var(--fg); opacity: .55; }
.rpt-print-btn {
padding: 8px 18px; border-radius:0;
border: 2px solid rgba(0,0,0,.18);
background: var(--module); font-size: 12px; font-weight: 700; cursor: pointer; color: var(--fg);
flex-shrink: 0;
}
.rpt-print-btn:hover { background: rgba(0,0,0,.05); border-color: var(--accent); }
/* Sections */
.rpt-section {
padding: 28px 0;
border-bottom: 2px solid rgba(0,0,0,.1);
position: relative;
}
.rpt-section:last-child { border-bottom: none; }
.rpt-section-title {
font-size: 11px; font-weight: 900; text-transform: uppercase;
letter-spacing: .09em; color: var(--fg); margin-bottom: 16px;
/* no opacity — full contrast */
}
.rpt-section-num {
position: absolute; right: 0; top: 22px;
font-size: 38px; font-weight: 900; color: rgba(0,0,0,.08);
line-height: 1; user-select: none;
}
/* Two-col */
.rpt-two-col {
display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
padding: 28px 0; border-bottom: 2px solid rgba(0,0,0,.1);
}
.rpt-two-col .rpt-section { border-bottom: none; padding: 0; }
/* Tables */
.rpt-table-wrap {
overflow-x: auto;
border-radius:0;
border: 2px solid rgba(0,0,0,.14);
box-shadow:none;
}
.rpt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-table thead { background: rgba(0,0,0,.05); }
.rpt-table th {
font-size: 10px; font-weight: 900; color: var(--fg);
text-transform: uppercase; letter-spacing: .06em;
padding: 11px 14px;
border-bottom: 2px solid rgba(0,0,0,.12);
text-align: left;
}
.rpt-table td {
padding: 11px 14px;
border-bottom: 1px solid rgba(0,0,0,.08);
color: var(--fg);
}
.rpt-table tr:last-child td { border-bottom: none; }
.rpt-table tbody tr:hover td { background: rgba(0,0,0,.03); }
.rpt-num { text-align: right; font-variant-numeric: tabular-nums; }
.rpt-totals td {
background: rgba(92,108,150,.07);
border-top: 2px solid rgba(92,108,150,.35) !important;
font-weight: 700;
}
.rpt-empty-firm td { opacity: .5; font-style: italic; }
.rpt-empty { padding: 16px 0; color: var(--fg); opacity: .45; font-style: italic; font-size: 13px; }
/* KPI cards */
.rpt-kpi-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rpt-kpi {
flex: 1; min-width: 76px; padding: 16px 12px;
background: var(--module);
border: 2px solid rgba(0,0,0,.12);
border-radius:0; text-align: center;
box-shadow:none;
}
.rpt-kpi strong { display: block; font-size: 28px; font-weight: 900; color: var(--fg); }
.rpt-kpi span {
display: block; font-size: 10px; color: var(--fg); opacity: .55;
margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
.rpt-kpi-lg .rpt-kpi strong { font-size: 34px; }
/* KPI color states */
.rpt-kpi-ok { background: rgba(92,108,150,.1); border-color: rgba(92,108,150,.5); }
.rpt-kpi-ok strong { color: #6E8F6B; }
.rpt-kpi-ok span { color: #6E8F6B; opacity: .8; }
.rpt-kpi-warn { background: rgba(168,97,92,.1); border-color: rgba(168,97,92,.5); }
.rpt-kpi-warn strong { color: #A8615C; }
.rpt-kpi-warn span { color: #A8615C; opacity: .8; }
.rpt-kpi-critical { background: rgba(168,97,92,.1); border-color: rgba(168,97,92,.5); }
.rpt-kpi-critical strong { color: #A8615C; }
.rpt-kpi-critical span { color: #A8615C; opacity: .8; }
/* Workforce rows */
.rpt-wf-list { display: flex; flex-direction: column; gap: 7px; }
.rpt-wf-row {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px; background: var(--module);
border: 2px solid rgba(0,0,0,.12);
border-radius:0; font-size: 13px; font-weight: 700; color: var(--fg);
}
.rpt-wf-row span { font-weight: 400; opacity: .65; }
.rpt-punch-row {
padding: 7px 0; font-size: 12px; color: var(--fg); opacity: .7;
border-bottom: 1px solid rgba(0,0,0,.09);
}
.rpt-punch-row:last-child { border-bottom: none; }
.rpt-issue-row {
font-size: 12px; padding: 6px 0;
border-bottom: 1px solid rgba(0,0,0,.09); color: var(--fg); opacity: .7;
}
.rpt-issue-row:last-child { border-bottom: none; }
/* Deltas */
.rpt-delta-up { color: #6E8F6B; font-weight: 800; }
.rpt-delta-down { color: #A8615C; font-weight: 800; }
/* Heat badge */
.rpt-heat-badge { padding: 4px 11px; border-radius:0; font-size: 12px; font-weight: 800; }
/* Notes */
.rpt-notes {
width: 100%; min-height: 90px; padding: 12px 14px; box-sizing: border-box;
border: 2px solid rgba(0,0,0,.14); border-radius:0; font-size: 13px;
font-family: inherit; resize: vertical; background: var(--module); color: var(--fg);
}
.rpt-notes:focus { outline: none; border-color: var(--accent); box-shadow:none; }
/* Status chips */
.rpt-status-ok { background: rgba(92,108,150,.15); color: #3E3E39; padding: 3px 10px; border-radius:0; font-weight: 700; font-size: 11px; }
.rpt-status-progress { background: rgba(168,97,92,.15); color: #78350f; padding: 3px 10px; border-radius:0; font-weight: 700; font-size: 11px; }
.rpt-status-open { background: rgba(0,0,0,.07); color: var(--fg); opacity: .7; padding: 3px 10px; border-radius:0; font-weight: 600; font-size: 11px; }
.rpt-status-critical { background: rgba(168,97,92,.15); color: #7f1d1d; padding: 3px 10px; border-radius:0; font-weight: 700; font-size: 11px; }
/* ── Customer report ──────────────────────────────── */
.rpt-cust-header {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 4px 0 24px; border-bottom: 3px solid rgba(0,0,0,.2); margin-bottom: 6px;
}
.rpt-cust-title { font-size: 26px; font-weight: 900; letter-spacing: -.02em; color: var(--fg); }
.rpt-cust-sub { font-size: 13px; color: var(--fg); opacity: .5; margin-top: 6px; }
/* Activity bars */
.rpt-activity-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.rpt-act-item { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 12px; }
.rpt-act-label { font-size: 13px; font-weight: 700; color: var(--fg); }
.rpt-act-bar-wrap {
height: 16px; background: rgba(0,0,0,.08); border-radius:0; overflow: hidden;
border: 1px solid rgba(0,0,0,.12);
}
.rpt-act-bar { height: 100%; border-radius:0; transition: width .5s cubic-bezier(.4,0,.2,1); }
.rpt-act-pct { font-size: 14px; font-weight: 900; text-align: right; }
/* Print */
/* ── Supervisor matrix table ────────────────────────────────────────────────── */
.supmat-table { border-collapse: collapse; }
.supmat-table th,
.supmat-table td { text-align: center; vertical-align: middle; }
.supmat-area-header { text-align: left !important; min-width: 120px; }
.supmat-area-cell { text-align: left !important; white-space: nowrap; }
.supmat-area-cell small { display: block; color: var(--muted); font-size: 11px; }
.supmat-sup-header {
min-width: 130px; padding: 8px 6px !important;
vertical-align: bottom !important;
}
.supmat-sup-name { font-weight: 600; font-size: 13px; white-space: nowrap; }
.supmat-sup-detail { color: var(--muted); font-size: 11px; white-space: nowrap; }
.supmat-remove-btn {
background: none; border: none; color: var(--critical); cursor: pointer;
font-size: 14px; margin-top: 4px; padding: 2px 6px; border-radius:0;
}
.supmat-remove-btn:hover { background: rgba(168,97,92,.1); }
.supmat-cell { width: 130px; }
.supmat-check-label { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.supmat-check-label input[type="checkbox"] { display: none; }
.supmat-x {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius:0; font-size: 16px; font-weight: 700;
color: var(--hot); transition: background .15s;
border: 2px solid var(--line);
}
.supmat-check-label:hover .supmat-x { background: var(--soft); border-color: var(--hot); }
.supmat-check-label input:checked + .supmat-x { background: var(--hot); color: #fff; border-color: var(--hot); }
/* ── Commessa admin panel ──────────────────────────────────────────────────── */
.cadm-card {
border: 1px solid var(--line); border-radius:0;
padding: 16px; margin-bottom: 16px; background: var(--surface);
}
.cadm-card-header {
display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
}
.cadm-card-header h3 { margin: 0; font-size: 15px; color: var(--ink); }
.cadm-card-header h3 small { color: var(--muted); font-weight: 400; margin-left: 8px; }
.cadm-card-header p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.cadm-card-logo {
width: 40px; height: 40px; border-radius:0; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700; background: var(--hot); color: #fff;
}
.cadm-card-logo img {
width: 100%;
height: 100%;
padding: 4px;
object-fit: contain;
border-radius:0;
background: #fff;
}
.cadm-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cadm-section > strong { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cadm-mod-grid, .cadm-user-grid {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.cadm-mod-toggle, .cadm-user-toggle {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; padding: 4px 8px; border-radius:0;
background: var(--soft); color: var(--ink); cursor: pointer; transition: background .15s;
}
.cadm-mod-toggle:hover, .cadm-user-toggle:hover { background: var(--line); }
.cadm-mod-toggle input, .cadm-user-toggle input { accent-color: var(--hot); }
.cadm-user-toggle small { color: var(--muted); margin-left: 2px; }
.cadm-user-toggle { flex:1 1 420px; }
@media print {
.rail, .sidebar, .topbar, #progressModule, #detailModule, #sideModule,
.rpt-tabs, .rpt-date-nav, .rpt-print-btn { display: none !important; }
.rpt-doc { padding: 0; }
.module { box-shadow:none; border: none !important; }
body { background: #fff; }
}
/* ── Commessa landing page ───────────────────────────────────────────────── */
.commessa-overlay {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 200;
display: flex;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
}
.commessa-page {
width: 100%;
max-width: 1100px;
padding: 0 2rem 4rem;
}
.commessa-page-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 0;
border-bottom: 1px solid var(--line);
margin-bottom: 2rem;
}
.commessa-brand {
display: flex;
align-items: center;
gap: .75rem;
font-weight: 600;
font-size: 1rem;
color: var(--ink);
}
.commessa-header-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.commessa-view-toggle {
display: flex;
gap: .25rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius:0;
padding: 2px;
}
.commessa-toggle-btn {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: .3rem .5rem;
border-radius:0;
font-size: .9rem;
transition: background .15s, color .15s;
}
.commessa-toggle-btn.active {
background: var(--hot);
color: #fff;
}
.commessa-page-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--ink);
margin: 0 0 1.5rem;
}
/* Box grid */
.commessa-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
.commessa-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius:0;
padding: 1.25rem;
cursor: pointer;
display: flex;
gap: 1rem;
align-items: flex-start;
transition: border-color .15s, box-shadow .15s;
box-shadow:none;
}
.commessa-card:hover {
border-color: var(--hot);
box-shadow:none;
}
.commessa-card-logo {
width: 44px;
height: 44px;
border-radius:0;
background: var(--hot);
color: #fff;
font-weight: 700;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.commessa-card-logo img,.commessa-list-logo img { width:100%; height:100%; padding:4px; object-fit:contain; border-radius:0; background:#fff; }
.commessa-card-body {
flex: 1;
min-width: 0;
}
.commessa-card-job {
font-size: .7rem;
color: var(--muted);
font-weight: 500;
margin-bottom: .2rem;
font-family: monospace;
}
.commessa-card-body h3 {
font-size: .95rem;
font-weight: 600;
color: var(--ink);
margin: 0 0 .3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.commessa-card-desc {
font-size: .8rem;
color: var(--muted);
margin: 0 0 .6rem;
line-height: 1.4;
}
.commessa-card-meta {
display: flex;
flex-wrap: wrap;
gap: .3rem;
}
/* List view */
.commessa-list {
display: flex;
flex-direction: column;
gap: .5rem;
}
.commessa-list-row {
background: var(--surface);
border: 1px solid var(--line);
border-radius:0;
padding: .85rem 1rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 1rem;
transition: border-color .15s, box-shadow .15s;
box-shadow:none;
}
.commessa-list-row:hover {
border-color: var(--hot);
box-shadow:none;
}
.commessa-list-logo {
width: 36px;
height: 36px;
border-radius:0;
background: var(--hot);
color: #fff;
font-weight: 700;
font-size: .9rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.commessa-list-info {
flex: 1;
min-width: 0;
}
.commessa-list-info strong {
display: block;
font-size: .9rem;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.commessa-list-info span {
font-size: .78rem;
color: var(--muted);
}
/* Shared chip */
.commessa-chip {
display: inline-flex;
align-items: center;
padding: .15rem .45rem;
border-radius:0;
font-size: .7rem;
font-weight: 500;
background: var(--soft);
color: var(--ink);
border: 1px solid var(--line);
}
/* Exit commessa button */
.commessa-exit-btn {
display: block;
margin-top: .5rem;
font-size: .7rem;
color: var(--hot);
background: none;
border: none;
cursor: pointer;
padding: 0;
text-align: left;
opacity: .8;
transition: opacity .15s;
}
.commessa-exit-btn:hover {
opacity: 1;
}
/* Landing page card actions */
.commessa-card-actions, .commessa-list-actions {
display: flex;
align-items: center;
gap: .4rem;
margin-top: .6rem;
}
.commessa-list-actions { margin-top: 0; margin-left: auto; flex-shrink: 0; }
.cland-enter-btn {
padding: .4rem .9rem;
font-size: .78rem;
font-weight: 600;
border-radius:0;
border: 1px solid var(--hot);
background: var(--hot);
color: #fff;
cursor: pointer;
transition: opacity .15s;
}
.cland-enter-btn:hover { opacity: .85; }
.cland-admin-toggle {
padding: .4rem .7rem;
font-size: .75rem;
font-weight: 500;
border-radius:0;
border: 1px solid var(--line);
background: var(--soft);
color: var(--ink);
cursor: pointer;
transition: background .15s;
}
.cland-admin-toggle:hover { background: var(--line); }
/* New commessa card */
.commessa-card-new {
border: 2px dashed var(--line);
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-height: 160px;
transition: border-color .15s;
}
.commessa-card-new:hover { border-color: var(--hot); }
.commessa-card-new h3 { color: var(--muted); }
.commessa-card { cursor: default; }
.commessa-list-row { cursor: default; }
/* ── Commessa admin modal ── */
/* ── Avatar menu on commessa page ── */
.commessa-avatar-menu {
position: absolute; top: 100%; right: 0; z-index: 1000;
background: var(--surface); border-radius:0; box-shadow:none;
min-width: 220px; padding: 6px 0; margin-top: 6px;
animation: cadmFadeIn .12s ease;
}
.cav-user-info { padding: 10px 14px; }
.cav-user-info strong { display: block; font-size: 14px; }
.cav-user-info small { color: var(--muted); font-size: 12px; }
.cav-divider { height: 1px; background: var(--line); margin: 4px 0; }
.cav-item {
display: block; width: 100%; padding: 9px 14px; border: none; background: none;
text-align: left; font-size: 13px; cursor: pointer; color: var(--ink);
}
.cav-item:hover { background: var(--bg); }
/* ── User registry overlay ── */
.user-registry-overlay {
position: fixed; inset: 0; z-index: 9998;
background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center;
padding: 1.5rem; animation: cadmFadeIn .15s ease;
}
.user-registry-dialog {
background: var(--surface); border-radius:0;
box-shadow:none;
width: 100%; max-width: 720px; max-height: 85vh;
display: flex; flex-direction: column; overflow: hidden;
}
.ureg-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.ureg-header h2 { margin: 0; font-size: 18px; }
.ureg-body { padding: 16px 22px; overflow-y: auto; flex: 1; }
.ureg-save-status { position:sticky; top:0; z-index:5; margin:0 0 12px; padding:10px 12px; border:1px solid var(--border); border-radius:0; background:var(--surface); color:var(--text); font-size:12px; font-weight:700; box-shadow:none; }
.ureg-save-status[data-status="pending"] { border-color:rgba(92,108,150,.55); }
.ureg-save-status[data-status="success"] { border-color:rgba(92,108,150,.6); color:var(--ok); }
.ureg-save-status[data-status="error"] { border-color:rgba(168,97,92,.65); color:var(--critical); }
.ureg-footer { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.ureg-user-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 0; border-bottom: 1px solid var(--line);
}
.ureg-user-row:last-child { border-bottom: none; }
.ureg-avatar {
width: 36px; height: 36px; border-radius:0; display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; color: white; flex-shrink: 0;
}
.ureg-user-info { flex: 1; min-width: 0; }
.ureg-user-info strong { display: block; font-size: 14px; }
.ureg-user-info small { color: var(--muted); font-size: 12px; }
.ureg-group-badge {
font-size: 11px; padding: 2px 8px; border-radius:0; font-weight: 600; white-space: nowrap;
}
.ureg-group-appaltatrice { background: #F7F6F1; color: #5C6C96; }
.ureg-group-montaggio { background: #C3BFB1; color: #6E8F6B; }
.ureg-group-client { background: #fef3c7; color: #A8615C; }
.ureg-actions { display: flex; gap: 4px; }
.ureg-tabs {
display: flex; gap: 0; border-bottom: 1px solid var(--line); padding: 0 22px;
}
.ureg-tab {
padding: 10px 16px; border: none; background: none; font-size: 13px; font-weight: 600;
color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ureg-tab:hover { color: var(--ink); }
.ureg-tab.active { color: var(--hot); border-bottom-color: var(--hot); }
.ureg-tab { display: inline-flex; align-items: center; gap: 6px; }
.ureg-icon { width: 16px; height: 16px; flex-shrink: 0; }
.ureg-co-logo-preview .ureg-icon, .ureg-profile-logo .ureg-icon { width: 26px; height: 26px; color: var(--muted); }
/* ── Company / profile anagraphic forms (client, montaggio, appaltatrice) ── */
.cadm-company-form, .ureg-profile-form { display: grid; gap: 14px; }
.ureg-co-form-title { font-size: 15px; font-weight: 650; color: var(--ink); }
#uregInlineForm:not(:empty) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ureg-co-identity-row { display: flex; align-items: flex-start; gap: 16px; }
.ureg-co-logo-preview, .ureg-profile-logo {
width: 64px; height: 64px; flex: 0 0 64px; border-radius: 0;
background: var(--bg); border: 2px dashed var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 22px; cursor: pointer; overflow: hidden; transition: border-color .15s;
}
.ureg-co-logo-preview img, .ureg-profile-logo img { width: 100%; height: 100%; object-fit: contain; }
.ureg-co-logo-preview:hover, .ureg-profile-logo:hover { border-color: var(--hot); }
.ureg-co-name-field { flex: 1; min-width: 0; }
.ureg-co-logo-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ureg-co-logo-actions small { color: var(--muted); font-size: 10.5px; }
.ureg-co-color-field { flex: 0 0 auto; }
.ureg-co-color-field .cadm-label { text-align: center; }
.ureg-co-color-input { width: 44px; height: 34px; border: 1px solid var(--line); padding: 2px; cursor: pointer; background: var(--bg); }
.ureg-plan-badge-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ureg-plan-badge-row small { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.cadm-fields-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 12px; }
.ureg-co-form-actions { display: flex; gap: 8px; padding-top: 2px; }
@media (max-width: 640px) {
.ureg-co-identity-row { flex-wrap: wrap; }
.cadm-fields-grid-3 { grid-template-columns: 1fr; }
}
html[data-theme="light"] .ureg-co-logo-preview,
html[data-theme="light"] .ureg-profile-logo { background: #f8f8fb; }
.cadm-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,.45);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
animation: cadmFadeIn .15s ease;
}
@keyframes cadmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cadm-dialog {
background: var(--surface);
border-radius:0;
box-shadow:none;
width: 100%;
max-width: 560px;
max-height: 85vh;
display: flex;
flex-direction: column;
animation: cadmSlideUp .2s ease;
}
@keyframes cadmSlideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cadm-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.2rem 1.4rem .8rem;
border-bottom: 1px solid var(--line);
}
.cadm-header h2 {
margin: 0;
font-size: 1.1rem;
color: var(--ink);
}
.cadm-header-job {
font-size: .72rem;
font-weight: 600;
color: var(--muted);
letter-spacing: .03em;
margin-bottom: .15rem;
}
.cadm-close {
background: none;
border: none;
font-size: 1.4rem;
color: var(--muted);
cursor: pointer;
line-height: 1;
padding: 0 0 0 .5rem;
}
.cadm-close:hover { color: var(--ink); }
.cadm-body {
padding: 1rem 1.4rem;
overflow-y: auto;
flex: 1;
}
.cadm-section-title {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
margin-bottom: .6rem;
}
.cadm-workflow-config { display:grid; gap:12px; }
.cadm-workflow-help { margin:0; color:var(--muted); font-size:12px; }
.cadm-workflow-types { display:grid; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cadm-workflow-row { display:grid; grid-template-columns:minmax(150px,1.5fr) 70px 90px minmax(130px,1fr); align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--line); font-size:12px; }
.cadm-workflow-row:first-child { border-top:0; }
.cadm-workflow-row.is-header { background:var(--panel-soft,rgba(255,255,255,.035)); color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.cadm-workflow-row label { display:flex; align-items:center; gap:6px; }
.cadm-workflow-row > span:last-child { color:var(--muted); }
.cadm-workflow-rules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (max-width:760px) {
.cadm-workflow-row { grid-template-columns:1fr 64px 76px; }
.cadm-workflow-row > span:last-child { grid-column:1 / -1; }
.cadm-workflow-rules { grid-template-columns:1fr; }
}
.cadm-divider {
height: 1px;
background: var(--line);
margin: 1rem 0;
}
.cadm-field-group {
margin-bottom: .7rem;
}
.cadm-label {
display: block;
font-size: .72rem;
font-weight: 600;
color: var(--muted);
margin-bottom: .2rem;
}
.cadm-input {
width: 100%;
padding: .45rem .6rem;
font-size: .82rem;
border: 1px solid var(--line);
border-radius:0;
background: var(--bg);
color: var(--ink);
outline: none;
transition: border-color .15s;
box-sizing: border-box;
}
.cadm-input:focus { border-color: var(--hot); }
.cadm-row {
display: flex;
gap: .6rem;
}
.cadm-flex1 { flex: 1; }
/* Module toggles grid */
.cadm-toggle-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: .3rem .8rem;
}
.cadm-toggle-item {
display: flex;
align-items: center;
gap: .35rem;
font-size: .8rem;
color: var(--ink);
cursor: pointer;
padding: .25rem 0;
}
.cadm-toggle-item input { accent-color: var(--hot); }
.cadm-delivery-picker-dialog { max-width: 640px; }
.cadm-delivery-mode-picker-standalone { display: grid; gap: 10px; }
.cadm-delivery-mode-chosen { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); }
.cadm-delivery-mode-chosen-card { flex: 1; display: grid; gap: 2px; }
.cadm-delivery-mode-chosen-card small { color: var(--muted); }
/* User list */
.cadm-user-list {
display: flex;
flex-direction: column;
gap: .15rem;
}
.cadm-user-row {
display: flex;
align-items: center;
gap: .4rem;
padding: .35rem .5rem;
border-radius:0;
cursor: pointer;
transition: background .1s;
}
.cadm-user-row:hover { background: var(--soft); }
.cadm-user-row input { accent-color: var(--hot); flex-shrink: 0; }
.cadm-user-name {
font-size: .82rem;
font-weight: 500;
color: var(--ink);
}
.cadm-user-email {
font-size: .72rem;
color: var(--muted);
margin-left: auto;
}
/* Footer */
.cadm-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: .8rem 1.4rem;
border-top: 1px solid var(--line);
gap: .5rem;
}
.cadm-footer-right {
display: flex;
gap: .4rem;
}
.cadm-btn-primary {
padding: .45rem 1rem;
font-size: .8rem;
font-weight: 600;
border: none;
border-radius:0;
background: var(--hot);
color: #fff;
cursor: pointer;
transition: opacity .15s;
}
.cadm-btn-primary:hover { opacity: .85; }
.cadm-btn-secondary {
padding: .45rem 1rem;
font-size: .8rem;
font-weight: 500;
border: 1px solid var(--line);
border-radius:0;
background: var(--surface);
color: var(--ink);
cursor: pointer;
}
.cadm-btn-secondary:hover { background: var(--soft); }
.cadm-btn-danger {
padding: .45rem .8rem;
font-size: .78rem;
font-weight: 500;
border: 1px solid #e5737380;
border-radius:0;
background: #fef2f2;
color: #A8615C;
cursor: pointer;
}
.cadm-btn-danger:hover { background: #fde8e8; }
/* Project create / edit experience */
.cadm-overlay:has(.cadm-project-dialog) {
padding: 28px;
background: rgba(9,11,18,.76) !important;
backdrop-filter: blur(8px);
}
.cadm-project-dialog {
width: min(960px, 100%);
max-width: 960px;
max-height: min(900px, calc(100vh - 56px));
overflow: hidden;
}
.cadm-project-dialog .cadm-header {
align-items: flex-start;
padding: 24px 28px 20px;
}
.cadm-title-block { min-width: 0; }
.cadm-title-block h2 { margin: 3px 0 0; font-size: 21px; line-height: 1.2; }
.cadm-title-block > p { max-width: 650px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.cadm-eyebrow { color: var(--aryvor-primary, #8496C2); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.cadm-project-dialog .cadm-close {
display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px;
padding: 0; border: 1px solid var(--line); border-radius:0;
font-size: 20px;
}
.cadm-project-dialog .cadm-close:hover { border-color: var(--hot); background: rgba(255,255,255,.04); }
.cadm-project-dialog .cadm-body { padding: 22px 28px 26px; }
.cadm-project-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.8fr); gap: 16px; align-items: start; }
.cadm-create-timeline { margin-bottom:18px; padding:0 2px 18px; border-bottom:1px solid var(--line); }
.cadm-project-side { display: grid; gap: 16px; }
.cadm-form-section {
padding: 18px; border: 1px solid var(--line); border-radius:0;
background: rgba(255,255,255,.018);
}
.cadm-section-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; }
.cadm-section-heading h3 { margin: 0; color: var(--ink); font-size: 13px; font-weight: 650; }
.cadm-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.cadm-section-icon {
display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px;
border: 1px solid color-mix(in srgb, var(--hot) 45%, transparent); border-radius:0;
color: var(--hot); font-size: 9px; font-weight: 700;
}
.cadm-fields-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.58fr); gap: 14px 12px; }
.cadm-project-dialog .cadm-field-group { margin: 0; min-width: 0; }
.cadm-field-wide { grid-column: 1 / -1; }
.cadm-project-dialog .cadm-label { margin-bottom: 6px; color: #C3BFB1; font-size: 10px; letter-spacing: .02em; }
.cadm-project-dialog .cadm-label em { color: var(--hot); font-style: normal; }
.cadm-project-dialog .cadm-input { min-height: 40px; padding: 9px 11px; background: rgba(8,10,17,.38); font-size: 12px; }
.cadm-project-dialog .cadm-input:focus { border-color: var(--hot); box-shadow:none; }
.cadm-project-dialog textarea.cadm-input { min-height: 78px; resize: vertical; line-height: 1.5; }
.cadm-project-dialog .cadm-field-group > small { display: block; margin-top: 5px; color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.cadm-project-dialog .cadm-field-group > .cadm-field-error { color: var(--critical); }
.cadm-company-picker { grid-template-columns: 1fr; gap: 7px; }
.cadm-company-picker .cadm-toggle-item {
min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius:0;
background: rgba(255,255,255,.018);
}
.cadm-company-picker .cadm-toggle-item:has(input:checked) { border-color: color-mix(in srgb, var(--hot) 58%, transparent); background: color-mix(in srgb, var(--hot) 8%, transparent); }
.cadm-company-picker input { width: 16px; height: 16px; }
.cadm-empty-note { padding: 12px; border: 1px dashed var(--line); color: var(--muted); font-size: 11px; line-height: 1.4; }
.cadm-license-card .cadm-section-heading { margin-bottom: 12px; }
.cadm-plan-summary { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
.cadm-plan-summary strong { color: var(--ink); font-size: 18px; font-weight: 500; }
.cadm-plan-summary span { color: var(--muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.cadm-project-dialog .cadm-footer { padding: 15px 28px; }
.cadm-project-dialog .cadm-btn-primary,
.cadm-project-dialog .cadm-btn-secondary,
.cadm-project-dialog .cadm-btn-danger { min-height: 36px; padding-inline: 15px; }
.cadm-project-title-line { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.cadm-project-logo { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; overflow: hidden; border: 1px solid var(--line); border-radius:0; background: #fff; color: #1C1C1A; font-weight: 700; }
.cadm-project-logo img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.cadm-project-edit .cadm-body > .cadm-section-title {
margin: 22px 0 9px; padding-top: 18px; border-top: 1px solid var(--line);
color: var(--ink); font-size: 10px; letter-spacing: .09em;
}
.cadm-project-edit .cadm-body > .cadm-divider { display: none; }
.cadm-project-edit .cadm-body > .cadm-section-title:first-of-type { margin-top: 12px; }
.cadm-project-edit .cadm-toggle-grid { gap: 8px; }
.cadm-project-edit .cadm-toggle-item,
.cadm-project-edit .cadm-user-row,
.cadm-project-edit .ctr-card { border: 1px solid var(--line); background: rgba(255,255,255,.014); }
.cadm-project-edit .cadm-toggle-item { min-height: 38px; padding: 7px 9px; border-radius:0; }
.cadm-project-edit .cadm-user-row { margin-bottom: 7px; padding: 9px 10px; }
@media (max-width: 760px) {
.cadm-overlay:has(.cadm-project-dialog) { align-items: stretch; padding: 0; }
.cadm-project-dialog { max-height: 100vh; border-radius:0; }
.cadm-project-dialog .cadm-header { padding: 18px 16px 15px; }
.cadm-project-dialog .cadm-body { padding: 16px; }
.cadm-project-dialog .cadm-footer { padding: 12px 16px; }
.cadm-project-grid, .cadm-fields-grid { grid-template-columns: 1fr; }
.cadm-field-wide { grid-column: auto; }
.cadm-project-dialog .cadm-footer { flex-wrap: wrap; }
.cadm-project-dialog .cadm-footer-right { width: 100%; }
.cadm-project-dialog .cadm-footer-right > button { flex: 1; }
}
html[data-theme="light"] .cadm-overlay:has(.cadm-project-dialog) { background: rgba(39,42,55,.52) !important; }
html[data-theme="light"] .cadm-form-section,
html[data-theme="light"] .cadm-company-picker .cadm-toggle-item,
html[data-theme="light"] .cadm-project-edit .cadm-toggle-item,
html[data-theme="light"] .cadm-project-edit .cadm-user-row,
html[data-theme="light"] .cadm-project-edit .ctr-card { background: #f8f8fb; }
html[data-theme="light"] .cadm-project-dialog .cadm-input { background: #fff; }
/* ── Work queue proposal button + panel ── */
.wq-proposal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-left: auto;
padding: .45rem .9rem;
font-size: .78rem;
font-weight: 600;
border-radius:0;
border: 1px solid var(--hot);
background: #fff;
color: var(--hot);
cursor: pointer;
white-space: nowrap;
transition: background .15s, color .15s;
align-self: center;
}
.wq-proposal-icon {
display: block;
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.wq-proposal-btn:hover, .wq-proposal-btn.active {
background: var(--hot);
color: #fff;
}
.wq-proposal-panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius:0;
padding: .8rem;
margin-bottom: 14px;
animation: wqPanelSlide .2s ease;
}
@keyframes wqPanelSlide {
from { opacity: 0; max-height: 0; padding: 0 .8rem; }
to { opacity: 1; max-height: 600px; }
}
.wq-proposal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: .4rem;
}
.wq-proposal-card {
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem .7rem;
border-radius:0;
background: var(--bg);
border: 1px solid var(--line);
transition: border-color .12s;
}
.wq-proposal-card:hover { border-color: var(--hot); }
.wq-proposal-rank {
width: 24px;
height: 24px;
border-radius:0;
background: var(--hot-soft, #F7F6F1);
color: var(--hot);
font-size: .7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wq-proposal-info {
flex: 1;
min-width: 0;
}
.wq-proposal-info strong {
display: block;
font-size: .8rem;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wq-proposal-info small {
font-size: .7rem;
color: var(--muted);
}
/* ── Work queue daily crew planner ─────────────────────────── */
.wq-day-planner { display:grid; gap:14px; padding:16px; border-radius:0; }
.wq-day-head { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; padding:2px 2px 13px; border-bottom:1px solid var(--line); }
.wq-day-head h3 { margin:3px 0 5px; color:var(--ink); font-size:clamp(18px,2vw,25px); text-transform:capitalize; }
.wq-day-head p { max-width:760px; margin:0; color:var(--muted); line-height:1.5; }
.wq-day-kicker { color:var(--hot); font-size:10px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.wq-day-controls { display:flex; align-items:flex-end; gap:9px; flex:0 0 auto; }
.wq-day-controls label { display:grid; gap:4px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.wq-day-controls input { min-height:36px; padding:7px 10px; border:1px solid var(--line); border-radius:0; color:var(--ink); background:var(--bg); }
.wq-day-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.wq-day-summary article { display:grid; gap:4px; padding:12px 14px; border:1px solid var(--line); border-radius:0; background:color-mix(in srgb,var(--surface) 92%,var(--hot) 8%); }
.wq-day-summary span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.wq-day-summary strong { color:var(--ink); font-size:22px; }
.wq-day-summary small { color:var(--muted); }
.wq-planner-empty { display:grid; justify-items:center; gap:8px; padding:30px 20px; border:1px dashed var(--line); border-radius:0; text-align:center; }
.wq-planner-empty>span { display:grid; place-items:center; width:42px; height:42px; border-radius:0; color:var(--hot); background:var(--hot-soft); }
.wq-planner-empty>span svg { width:22px; height:22px; }
.wq-planner-empty strong { color:var(--ink); font-size:15px; }
.wq-planner-empty p { max-width:680px; margin:0 0 5px; color:var(--muted); }
.wq-plan-toolbar { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:0; background:var(--bg); }
.wq-plan-toolbar>small { color:var(--muted); }
.wq-plan-toolbar>div { display:flex; gap:8px; }
.wq-plan-status { display:inline-flex; align-items:center; width:max-content; padding:5px 9px; border-radius:0; color:#6f6131; background:#f4e8b9; font-size:10px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.wq-plan-status.published { color:#6E8F6B; background:#F7F6F1; }
.wq-published-check { color:var(--ok); font-size:12px; font-weight:800; }
.wq-package-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.wq-day-package { overflow:hidden; border:1px solid var(--line); border-radius:0; background:var(--bg); }
.wq-day-package>header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:13px 14px 10px; }
.wq-day-package>header>div:first-child { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; min-width:0; }
.wq-day-package>header strong { overflow:hidden; color:var(--ink); font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.wq-day-package>header small { grid-column:2; color:var(--muted); }
.wq-crew-dot { width:9px; height:9px; border-radius:0; background:var(--hot); box-shadow:none; }
.wq-load { display:grid; justify-items:end; gap:1px; flex:0 0 auto; }
.wq-load b { color:var(--ink); font-size:16px; }
.wq-load small { color:var(--muted); font-size:9px; text-transform:uppercase; }
.wq-load.over b { color:var(--critical); }
.wq-package-meter { height:4px; margin:0 14px 9px; overflow:hidden; border-radius:0; background:var(--line); }
.wq-package-meter i { display:block; height:100%; border-radius:0; background:linear-gradient(90deg,var(--hot),#5C6C96); }
.wq-day-items { display:grid; }
.wq-day-item { display:grid; grid-template-columns:24px minmax(0,1fr) auto 128px 28px; gap:8px; align-items:center; padding:10px 14px; border-top:1px solid var(--line); }
.wq-item-order { display:grid; place-items:center; width:22px; height:22px; border-radius:0; color:var(--hot); background:var(--hot-soft); font-size:10px; font-weight:850; }
.wq-item-main { min-width:0; }
.wq-item-main strong { display:-webkit-box; overflow:hidden; color:var(--ink); font-size:12px; line-height:1.3; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.wq-item-main small { display:block; margin-top:2px; color:var(--muted); }
.wq-item-main p { margin:4px 0 0; color:var(--muted); font-size:10px; line-height:1.35; }
.wq-confidence { padding:4px 7px; border-radius:0; color:#71601e; background:#f4e8b9; font-size:8px; font-weight:850; text-transform:uppercase; white-space:nowrap; }
.wq-confidence.high { color:#6E8F6B; background:#F7F6F1; }
.wq-confidence.medium { color:#7d5a13; background:#f7e9bd; }
.wq-reassign { min-width:0; padding:6px 7px; border:1px solid var(--line); border-radius:0; color:var(--ink); background:var(--surface); font-size:10px; }
.wq-remove { width:26px; height:26px; color:var(--critical); }
.wq-package-empty { padding:18px; border-top:1px solid var(--line); color:var(--muted); text-align:center; }
.wq-day-package>footer { display:flex; justify-content:space-between; align-items:center; gap:9px; padding:10px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.wq-day-package.published .wq-day-item { grid-template-columns:24px minmax(0,1fr) auto; }
.wq-exceptions { border:1px solid var(--line); border-radius:0; background:var(--bg); }
.wq-exceptions>summary { padding:11px 13px; color:var(--ink); cursor:pointer; font-weight:750; }
.wq-exceptions>summary b { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:5px; padding:0 5px; border-radius:0; color:var(--critical); background:color-mix(in srgb,var(--critical) 13%,transparent); font-size:10px; }
.wq-exception-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 13px 13px; }
.wq-exception-grid h4 { margin:5px 0 8px; color:var(--ink); font-size:11px; text-transform:uppercase; }
.wq-exception-grid p { display:grid; gap:2px; margin:0; padding:7px 0; border-top:1px solid var(--line); }
.wq-exception-grid p strong { color:var(--ink); font-size:11px; }
.wq-exception-grid p span { color:var(--muted); font-size:10px; }
.modal:has(.wq-report) { width:min(1100px,calc(100vw - 30px)); max-height:calc(100vh - 30px); overflow:auto; }
.wq-report { display:grid; gap:15px; }
.wq-report-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:15px 17px; border-radius:0; color:var(--ink); background:color-mix(in srgb,var(--surface) 88%,var(--hot) 12%); }
.wq-report-hero span,.wq-report-meta span,.wq-report-foot span { color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.wq-report-hero h3 { margin:4px 0; color:var(--ink); font-size:22px; }
.wq-report-hero p { margin:0; color:var(--muted); }
.wq-report-hero>strong { display:grid; justify-items:end; color:var(--hot); font-size:25px; }
.wq-report-hero>strong small { color:var(--muted); font-size:9px; text-transform:uppercase; }
.wq-report-meta { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.wq-report-meta>div,.wq-report-foot>div { display:grid; gap:3px; padding:10px 12px; border:1px solid var(--line); border-radius:0; background:var(--bg); }
.wq-report-meta strong,.wq-report-foot strong { overflow:hidden; color:var(--ink); text-overflow:ellipsis; white-space:nowrap; }
.wq-report-table { overflow:auto; border:1px solid var(--line); border-radius:0; }
.wq-report-table table { width:100%; min-width:850px; border-collapse:collapse; }
.wq-report-table th { padding:9px 10px; color:var(--muted); background:var(--bg); font-size:9px; text-align:left; text-transform:uppercase; }
.wq-report-table td { padding:10px; border-top:1px solid var(--line); color:var(--ink); vertical-align:top; }
.wq-report-table td small { display:block; margin-top:2px; color:var(--muted); }
.wq-report-foot { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.wq-report-foot small { color:var(--muted); }
html[data-theme="light"] :is(.wq-day-summary article,.wq-day-package,.wq-plan-toolbar,.wq-exceptions,.wq-report-meta>div,.wq-report-foot>div,.wq-day-controls input,.wq-reassign) { border-color:var(--aryvor-border)!important; background:#fff!important; color:var(--aryvor-text)!important; }
html[data-theme="light"] :is(.wq-report-hero,.wq-planner-empty>span) { background:#F7F6F1!important; }
@media (max-width:1100px) {
.wq-package-grid { grid-template-columns:1fr; }
.wq-day-item { grid-template-columns:24px minmax(0,1fr) auto; }
.wq-reassign { grid-column:2; }
.wq-remove { grid-column:3; grid-row:2; }
}
@media (max-width:760px) {
.wq-day-head { display:grid; }
.wq-day-controls { width:100%; flex-wrap:wrap; }
.wq-day-controls label { flex:1; }
.wq-day-controls input { width:100%; }
.wq-day-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wq-plan-toolbar { grid-template-columns:1fr; }
.wq-plan-toolbar>div { flex-wrap:wrap; }
.wq-exception-grid,.wq-report-foot { grid-template-columns:1fr; }
.wq-report-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* ── Equipment row status coloring ──────────────────────────── */
.eq-row-ready { background: #F7F6F1 !important; }
.eq-row-assigned { background: #8496C2 !important; }
.eq-row-done { background: #e8f5e9 !important; }
/* Pulsing QC button */
.qc-pulse {
animation: qcPulse 1.5s ease-in-out infinite;
}
@keyframes qcPulse {
0%, 100% { box-shadow:none; }
50% { box-shadow:none; }
}
/* ── Full-width Gantt container ─────────────────────────────── */
#fullWidthGantt {
margin-bottom: 16px;
}
#fullWidthGantt .planning-strip {
width: 100%;
margin: 0 0 14px;
}
/* Gantt bi-weekly minor ticks */
.gantt-tick-minor {
font-size: 9px;
color: var(--muted);
opacity: 0.6;
}
.gantt-tick-minor::before {
height: 4px;
}
.gantt-tick-major {
font-weight: 650;
}
/* Gantt warning icon */
.gantt-warn {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 4px;
color: #A8615C;
font-size: 10px;
font-weight: 700;
}
/* Gantt legend */
.gantt-legend {
display: flex;
gap: 12px;
align-items: center;
}
.gantt-legend-item {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: var(--muted);
font-weight: 600;
}
.gantt-legend-swatch {
display: inline-block;
width: 12px;
height: 8px;
border-radius:0;
}
.gantt-legend-today {
width: 2px;
height: 12px;
background: #A8615C !important;
border-radius:0;
}
/* ── Readable installation Gantt ───────────────────────────── */
.planning-gantt {
padding: 15px 18px 16px;
background: linear-gradient(180deg, #fff 0%, #fbfbfa 100%);
box-shadow:none;
}
.planning-gantt .planning-strip-header {
display: grid;
grid-template-columns: minmax(210px, 1fr) auto auto;
gap: 18px;
align-items: center;
margin-bottom: 16px;
}
.planning-gantt .planning-strip-header > div:first-child small {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 10px;
}
.planning-gantt .gantt-legend {
flex-wrap: wrap;
justify-content: center;
gap: 7px 13px;
}
.planning-gantt .gantt-legend-item { color: #555; font-size: 10px; }
.gantt-legend-done { background: #C3BFB1; }
.gantt-legend-plan { background: #8496C2; border: 1px solid #8496C2; }
.gantt-legend-late { background: #f5dbe0; border: 1px solid #A8615C; }
.planning-gantt .gantt-chart { gap: 8px; }
.planning-gantt .gantt-axis-row { height: 28px; }
.planning-gantt .gantt-label-spacer,
.planning-gantt .gantt-label { width: 155px; }
.planning-gantt .gantt-axis {
border-bottom: 1px solid #cfcfca;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.012));
}
.planning-gantt .gantt-tick {
bottom: 7px;
color: #515151;
font-size: 10px;
font-variant-numeric: tabular-nums;
}
.planning-gantt .gantt-tick::before { bottom: -9px; height: 8px; background: #bdbdb8; }
.planning-gantt .gantt-row { height: 54px; border-radius:0; }
.planning-gantt .gantt-row:nth-child(odd) { background: rgba(0,0,0,.014); }
.planning-gantt .gantt-label {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 2px 7px;
padding: 7px 12px 7px 4px;
}
.planning-gantt .gantt-label > strong { grid-row: 1 / 3; align-self: center; font-size: 14px; }
.planning-gantt .gantt-label > small { color: var(--muted); font-size: 9px; }
.planning-gantt .gantt-badges .status { min-width: 20px; text-align: center; }
.planning-gantt .gantt-track { height: 100%; overflow: visible; background: rgba(244,244,242,.78); border-radius:0; }
.planning-gantt .gantt-gridline {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
z-index: 0;
border-left: 1px dashed #deded9;
}
.planning-gantt .gantt-today-line { width: 2px; background: #A8615C; opacity: .78; }
.planning-gantt .gantt-axis .gantt-today-line { top: 0; bottom: -58px; z-index: 5; }
.planning-gantt .gantt-axis .gantt-today-line span {
position: absolute;
bottom: 1px;
left: 5px;
padding: 1px 4px;
border-radius:0;
background: #fff0f4;
color: #A8615C;
font-size: 8px;
font-weight: 800;
}
.planning-gantt .gantt-bar {
top: 31px;
height: 17px;
border: 1px solid rgba(92,108,150,.12);
border-radius:0;
box-shadow:none;
}
.planning-gantt .gantt-bar.on-track { background: #8496C2; }
.planning-gantt .gantt-bar.has-late { background: #f5dbe0; border-color: #A8615C; }
.planning-gantt .gantt-bar.all-done { background: #dcefe2; border-color: #C3BFB1; }
.planning-gantt .gantt-done-fill { background: #C3BFB1; }
.planning-gantt .gantt-pct { font-size: 10px; color: #242424; }
.planning-gantt .gantt-date {
top: 8px;
display: flex;
gap: 4px;
align-items: center;
padding: 2px 5px;
border-radius:0;
background: rgba(255,255,255,.92);
color: #333;
font-size: 9px;
font-variant-numeric: tabular-nums;
box-shadow:none;
}
.planning-gantt .gantt-date b { color: var(--muted); font-size: 7px; letter-spacing: .3px; }
.planning-gantt .gantt-date-s { transform: none; }
.planning-gantt .gantt-date-e { transform: translateX(-100%); }
/* Equipment row background legend */
.equipment-row-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
margin: 0 0 12px;
padding: 10px 13px;
border: 1px solid var(--line);
border-radius:0;
background: rgba(255,255,255,.72);
}
.equipment-row-legend > strong { margin-right: 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .35px; }
.equipment-row-legend > span { display: grid; grid-template-columns: 13px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; }
.equipment-row-legend i { grid-row: 1 / 3; width: 13px; height: 13px; border: 1px solid rgba(0,0,0,.09); border-radius:0; }
.equipment-row-legend b { font-size: 10px; line-height: 1.1; }
.equipment-row-legend small { color: var(--muted); font-size: 8px; line-height: 1.2; }
.eq-legend-ready { background: #F7F6F1; }
.eq-legend-assigned { background: #8496C2; }
.eq-legend-progress { background: #fff; }
.eq-legend-done { background: #e8f5e9; }
.progress-row-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin: 0 20px 12px;
padding: 10px 13px;
border: 1px solid var(--line);
border-radius:0;
background: rgba(255,255,255,.76);
}
/* Production modules: timeline, legend and register share one alignment grid. */
.split-view.production-layout #primaryModule .planning-strip,
.split-view.production-layout #primaryModule .progress-row-legend {
width: 100%;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
.split-view.production-layout #primaryModule .planning-strip {
margin-top: 0;
margin-bottom: 14px;
}
.split-view.production-layout #primaryModule .progress-row-legend {
margin-bottom: 12px;
}
.progress-row-legend > strong { margin-right: 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .35px; }
.progress-row-legend > span { display: grid; grid-template-columns: 13px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; }
.progress-row-legend i { grid-row: 1 / 3; width: 13px; height: 13px; border: 1px solid rgba(0,0,0,.09); border-radius:0; }
.progress-row-legend b { font-size: 10px; line-height: 1.1; }
.progress-row-legend small { color: var(--muted); font-size: 8px; line-height: 1.2; }
.progress-legend-ready { background: #F7F6F1; }
.progress-legend-assigned { background: #8496C2; }
.progress-legend-active { background: #fff6dc; }
.progress-legend-done { background: #e6f5ea; }
.progress-legend-blocked { background: #fde8eb; }
.ops-table tr.progress-row-ready > td { background: #F7F6F1; }
.ops-table tr.progress-row-assigned > td { background: #8496C2; }
.ops-table tr.progress-row-active > td { background: #fff6dc; }
.ops-table tr.progress-row-done > td { background: #e6f5ea; }
.ops-table tr.progress-row-blocked > td { background: #fde8eb; }
.ops-table tr.progress-row-ready:hover > td,
.ops-table tr.progress-row-assigned:hover > td,
.ops-table tr.progress-row-active:hover > td,
.ops-table tr.progress-row-done:hover > td,
.ops-table tr.progress-row-blocked:hover > td { filter: brightness(.985); }
@media (max-width: 1050px) {
.planning-gantt .planning-strip-header { grid-template-columns: 1fr auto; }
.planning-gantt .gantt-legend { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
.planning-gantt .gantt-label-spacer,.planning-gantt .gantt-label { width: 125px; }
}
/* Quality control plans and measurement instruments */
.qc-workspace-tabs { display: inline-flex; gap: 4px; margin: 0 0 12px; padding: 4px; border: 1px solid var(--line); border-radius:0; background: var(--soft); }
.qc-workspace-tabs button { min-height: 34px; padding: 0 14px; border: 0; border-radius:0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.qc-workspace-tabs button.active { background: var(--surface); color: var(--ink); box-shadow:none; }
.qc-workspace-intro { margin: 0 0 16px; color: var(--muted); font-size: 12px; }
.module-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 13px; font-weight: 400; }
.quality-plan-list { display: grid; gap: 14px; }
.quality-plan-card { border: 1px solid var(--line); border-radius:0; background: var(--surface); overflow: hidden; }
.quality-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px; background: linear-gradient(180deg,#fff,#fafafa); border-bottom: 1px solid var(--line); }
.quality-plan-head h3 { margin: 3px 0 5px; font-size: 17px; }
.quality-plan-head p { margin: 0; color: var(--muted); font-size: 12px; }
.quality-plan-code { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.quality-type-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.quality-type-list span { padding: 4px 7px; border-radius:0; background: #F7F6F1; color: #3E3E39; font-size: 10px; font-weight: 750; }
.quality-type-field { margin: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius:0; }
.quality-type-field legend { padding: 0 5px; color: var(--muted); font-size: 11px; font-weight: 750; }
.quality-type-field .quality-checkboxes { flex-wrap: wrap; padding: 3px 0; }
.qc-plan-ref,.qc-acceptance,.qc-step-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.qc-acceptance { color: #3E3E39; font-weight: 650; }
.qc-evidence-input { margin-top: 6px; border-color: #8496C2 !important; }
.qc-evidence-upload { display: inline-flex; margin-top: 6px; padding: 5px 8px; border: 1px dashed #8496C2; border-radius:0; color: #3E3E39; font-size: 10px; font-weight: 750; cursor: pointer; }
.qc-evidence-upload input { display: none; }
.quality-plan-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.quality-status,.calibration-status { display: inline-flex; align-items: center; border-radius:0; padding: 5px 9px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.quality-status.published,.calibration-status.valid { color: #6E8F6B; background: #e7f6ed; }
.quality-status.draft,.calibration-status.missing { color: #78621c; background: #fff4ce; }
.quality-status.superseded { color: var(--muted); background: #eceeed; }
.calibration-status.due { color: #8a5b00; background: #fff0c7; }
.calibration-status.expired,.calibration-status.out { color: #A8615C; background: #fde8ed; }
.quality-table-wrap { width: 100%; overflow-x: auto; }
.quality-steps th:first-child,.quality-steps td:first-child { width: 54px; text-align: center; }
.quality-steps td strong,.instruments-table td strong { display: block; }
.quality-steps td small,.instruments-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.quality-evidence { display: inline-flex; border-radius:0; padding: 4px 7px; color: var(--muted); background: #f1f2f2; font-size: 10px; white-space: nowrap; }
.quality-evidence.required { color: #33405E; background: #F7F6F1; font-weight: 700; }
.quality-actions { white-space: nowrap; text-align: right; }
.icon-action { width: 30px; height: 30px; margin-left: 3px; border: 1px solid var(--line); border-radius:0; background: #fff; color: var(--ink); cursor: pointer; }
.icon-action:hover { border-color: var(--accent); color: var(--accent); }
.icon-action.danger { color: var(--critical); }
.quality-empty { padding: 22px !important; color: var(--muted); text-align: center !important; }
.quality-empty-state { display: grid; justify-items: center; gap: 6px; padding: 48px; border: 1px dashed var(--line); border-radius:0; color: var(--muted); }
.quality-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.quality-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.form-grid :is(input,select,textarea) { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 0; background: var(--surface-2); color: var(--text); font: inherit; }
.form-grid textarea { min-height: 70px; resize: vertical; }
.form-grid .full-span { grid-column: 1/-1; }
.form-grid fieldset.full-span { display: grid; gap: 8px; grid-column: 1/-1; padding: 12px; border: 1px solid var(--line); }
.form-grid fieldset legend { padding: 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.form-grid fieldset label { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
.quality-checkboxes { display: flex; gap: 22px; padding: 10px 0; }
.quality-checkboxes label { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.instruments-table { border: 1px solid var(--line); border-radius:0; }
.instruments-table table { min-width: 1180px; }
.quality-file { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; color: var(--accent); font-size: 11px; white-space: nowrap; }
.quality-file.muted { color: var(--muted); }
.quality-upload { display: inline-flex; margin-top: 5px; color: var(--accent); cursor: pointer; font-size: 10px; font-weight: 700; }
.quality-upload input { display: none; }
@media (max-width: 900px) { .quality-plan-head { flex-direction: column; } .quality-plan-tools { justify-content: flex-start; } .quality-form-grid { grid-template-columns: 1fr; } }
.commessa-chip.plan-lite { background:#eef1f3; color:#6E6D66; }
.commessa-chip.plan-pro { background:#8496C2; color:#5C6C96; }
.commessa-chip.plan-ultra { background:#F7F6F1; color:#5C6C96; }
.module-locked { opacity:.48; cursor:not-allowed; }
.module-locked small,.cadm-mod-toggle small,.cadm-toggle-item small { display:block; margin-top:2px; color:var(--muted); font-size:9px; font-weight:600; }
.area-plant-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:14px; }
.area-plant-card { border:1px solid var(--line); border-radius:0; background:var(--surface); overflow:hidden; }
.area-plant-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px; background:var(--soft); border-bottom:1px solid var(--line); }
.area-plant-card header span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.08em; }
.area-plant-card header h3 { margin:3px 0; font-size:16px; }
.area-plant-card header small { color:var(--muted); }
.area-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line); }
.area-row:last-child { border-bottom:0; }
.area-row strong,.area-row span,.area-row small { display:block; }
.area-row strong { color:var(--accent); font-size:12px; }
.area-row span { margin-top:2px; font-weight:700; }
.area-row small { margin-top:3px; color:var(--muted); font-size:10px; }
.area-orphan { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding:12px; border:1px dashed var(--line); border-radius:0; }
/* ── Contractor management ─────────────────────────────────────────────── */
.ctr-section { border-top:2px solid var(--line); padding-top:16px; margin-top:8px; }
.ctr-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ctr-card-grid { display:flex; flex-direction:column; gap:12px; }
.ctr-card { border:1px solid var(--line); border-radius:0; background:var(--soft); overflow:hidden; }
.ctr-card-header { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface); }
.ctr-card-header strong { flex:1; font-size:14px; }
.ctr-actions { display:flex; gap:4px; }
.ctr-dot { display:inline-block; width:10px; height:10px; border-radius:0; margin-right:6px; vertical-align:middle; flex-shrink:0; }
.ctr-dot-lg { display:inline-block; width:16px; height:16px; border-radius:0; flex-shrink:0; }
.ctr-detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.ctr-detail-col { padding:12px 16px; border-right:1px solid var(--line); }
.ctr-detail-col:last-child { border-right:0; }
.ctr-detail-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; }
.ctr-detail-col .cadm-mod-toggle { display:flex; align-items:center; gap:6px; font-size:12px; padding:3px 0; }
.ctr-detail-col .cadm-mod-toggle small { font-size:10px; color:var(--muted); }
@media (max-width:900px) {
.ctr-detail-grid { grid-template-columns:1fr; }
.ctr-detail-col { border-right:0; border-bottom:1px solid var(--line); }
.ctr-detail-col:last-child { border-bottom:0; }
}
/* ========================================================================== */
/* ElecMount Midnight — visual system inspired by technical data dashboards */
/* ========================================================================== */
:root {
color-scheme: dark;
--bg: #0D0D0C;
--surface: #1C1C1A;
--surface-2: #1C1C1A;
--soft: #1C1C1A;
--line: rgba(92,108,150, .14);
--ink: #F7F6F1;
--muted: #8496C2;
--hot: #A8615C;
--hot-soft: rgba(168,97,92, .14);
--ok: #6E8F6B;
--warn: #A8615C;
--critical: #A8615C;
--blue: #8496C2;
--violet: #5C6C96;
--shadow: 0 30px 90px rgba(0, 0, 0, .38);
}
body {
position: relative;
background:
radial-gradient(circle at 12% 8%, rgba(92,108,150, .19), transparent 34%),
radial-gradient(circle at 88% 88%, rgba(92,108,150, .16), transparent 35%),
linear-gradient(145deg, #1C1C1A 0%, #0D0D0C 52%, #0D0D0C 100%);
color: var(--ink);
font-family: "Avenir Next", Avenir, Inter, "Segoe UI", system-ui, sans-serif;
letter-spacing: .006em;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: .14;
background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
background-size: 42px 42px;
}
::selection { background: rgba(168,97,92,.3); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3E3E39; border-radius:0; }
.shell {
grid-template-columns: 68px 236px 1fr;
height: calc(100vh - 32px);
margin: 16px;
border: 1px solid rgba(92,108,150, .1);
border-radius:0;
background: rgba(17, 23, 37, .88);
box-shadow:none;
backdrop-filter: blur(22px);
}
.rail {
gap: 14px;
padding: 20px 11px;
border-right: 1px solid var(--line);
background: rgba(10, 15, 26, .48);
}
.brand, .login-brand-icon {
background: linear-gradient(145deg, #A8615C, #A8615C);
color: #141413;
box-shadow:none;
}
.rail-btn, .icon-btn, .round {
border: 1px solid transparent;
background: transparent;
color: #8496C2;
box-shadow:none;
}
.rail-btn:hover, .icon-btn:hover, .round:hover {
border-color: var(--line);
background: rgba(255,255,255,.05);
color: #fff;
}
.rail-btn.active, .rail-btn.selected, .plus-btn {
background: var(--hot-soft);
color: var(--hot);
box-shadow:none;
}
.notify::after { border-color: #141413; background: var(--hot); }
.sidebar {
top: 16px;
height: calc(100vh - 32px);
padding: 24px 16px;
border-right: 1px solid var(--line);
background: rgba(92,108,150, .68);
}
.project-title strong { color: #fff; font-size: 18px; letter-spacing: .04em; }
.project-title span, .tree .muted, .sidebar-card span, .sidebar-card small { color: var(--muted); }
.tree { --nav-connector: var(--line); }
.tree p { color: #8496C2; letter-spacing: .13em; }
.tree p::after { background: var(--line); }
.tree a:hover::after, .tree a.selected::after { --nav-connector: var(--line-strong, var(--line)); }
.tree p button { color: #8496C2; }
.tree p button:hover { background: rgba(255,255,255,.05); }
.tree a { color: #8496C2; border: 1px solid transparent; }
.tree a::before { color: #6E6D66; }
.tree a:hover { background: rgba(255,255,255,.035); color: #f5f7fb; }
.tree a.selected {
border-color: rgba(168,97,92,.12);
background: linear-gradient(90deg, rgba(168,97,92,.15), rgba(168,97,92,.035));
color: #A8615C;
box-shadow:none;
}
.tree a.selected::before { color: var(--hot); }
.sidebar-card {
border: 1px solid var(--line) !important;
background: rgba(255,255,255,.025) !important;
box-shadow:none;
}
.workspace { background: transparent; }
.topbar {
min-height: 64px;
padding: 12px 24px;
border-bottom: 1px solid var(--line);
background: rgba(14, 20, 33, .42);
}
.search {
border: 1px solid var(--line) !important;
background: rgba(255,255,255,.035) !important;
box-shadow:none;
}
.search:focus-within { border-color: rgba(168,97,92,.55) !important; box-shadow:none; }
.search input { color: var(--ink) !important; }
.search input::placeholder { color: #6E6D66; }
input, select, textarea, .settings-select, .cadm-input {
border-color: var(--line) !important;
background-color: rgba(12, 18, 30, .72) !important;
color: var(--ink) !important;
}
input:focus, select:focus, textarea:focus, .settings-select:focus, .cadm-input:focus {
border-color: rgba(168,97,92,.65) !important;
outline: 0;
box-shadow:none;
}
.avatar { border: 1px solid rgba(168,97,92,.32) !important; background: var(--hot-soft) !important; color: #A8615C !important; }
.plus-btn { border: 1px solid rgba(168,97,92,.25); box-shadow:none; }
.panel { padding: 22px 24px 40px; background: transparent; }
.panel-toolbar { border-bottom-color: var(--line); }
.crew { color: #8496C2; }
.hero-grid {
position: relative;
margin: 14px 0 20px;
padding: 26px 28px;
overflow: hidden;
border: 1px solid var(--line);
border-radius:0;
background: linear-gradient(115deg, rgba(92,108,150,.92), rgba(92,108,150,.65));
box-shadow:none;
}
.hero-grid::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
right: -90px;
top: -150px;
border: 1px solid rgba(168,97,92,.18);
border-radius:0;
box-shadow:none;
pointer-events: none;
}
.hero-copy { position: relative; z-index: 1; }
.eyebrow { color: var(--hot) !important; letter-spacing: .15em !important; }
.hero-copy h1 { color: #f7f8fc; font-weight: 500 !important; letter-spacing: -.025em; }
.hero-copy p { color: #8496C2 !important; max-width: 760px; }
.metric-line span { color: #fff !important; font-weight: 500; }
.metric-line { flex-wrap: wrap; }
.metric-line b,
.metric-line strong { white-space: nowrap; border: 1px solid transparent; }
.metric-line b {
border-color: rgba(92,108,150,.2);
background: rgba(92,108,150,.1) !important;
color: #C3BFB1 !important;
}
.metric-line strong {
border-color: rgba(168,97,92,.2);
background: rgba(168,97,92,.1) !important;
color: #A8615C !important;
}
.crew, #roleChip {
border: 1px solid rgba(168,97,92,.18);
border-radius:0;
background: rgba(168,97,92,.08) !important;
color: #A8615C !important;
}
.hero-controls { position: relative; z-index: 2; }
.kpis { gap: 12px; }
.kpi-card {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius:0;
background: linear-gradient(145deg, rgba(92,108,150,.88), rgba(92,108,150,.9));
box-shadow:none;
}
.kpi-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--blue); }
.kpi-card:nth-child(2)::before { background: var(--hot); }
.kpi-card:nth-child(3)::before { background: var(--violet); }
.kpi-card:nth-child(4)::before { background: var(--ok); }
.kpi-card.hot { background: linear-gradient(145deg, rgba(74,36,48,.72), rgba(33,29,43,.9)); border-color: rgba(168,97,92,.22); }
.kpi-card span, .kpi-card .trend { color: #8496C2 !important; }
.kpi-card strong { color: #fff; font-weight: 500; }
.split-view, .lower-grid { gap: 12px; }
.module, .cadm-card {
border: 1px solid var(--line) !important;
border-radius:0;
background: rgba(92,108,150,.82) !important;
box-shadow:none;
}
.module.accent { background: linear-gradient(145deg, rgba(92,108,150,.9), rgba(92,108,150,.88)) !important; }
.module h2, .module-header h2, .cadm-card-header h3 { color: #F7F6F1; font-weight: 500; }
.module-subtitle, .panel-hint { color: var(--muted); }
.workflow-table, table { color: #E3E0D5; }
.workflow-table thead th, table thead th {
border-bottom-color: rgba(168,97,92,.22) !important;
background: rgba(12,18,30,.56) !important;
color: #8496C2 !important;
letter-spacing: .075em;
}
.workflow-table td, table td { border-color: rgba(92,108,150,.09) !important; }
.workflow-table tbody tr:hover, table tbody tr:hover { background: rgba(255,255,255,.025) !important; }
.table-wrap { border-color: var(--line) !important; background: rgba(13,19,31,.38); }
.filter-btn, .cadm-btn-secondary {
border-color: var(--line) !important;
background: rgba(255,255,255,.035) !important;
color: #8496C2 !important;
box-shadow:none;
}
.filter-btn:hover, .cadm-btn-secondary:hover { border-color: rgba(168,97,92,.3) !important; color: #fff !important; }
.primary-action, .cadm-btn-primary {
border-color: #A8615C !important;
background: linear-gradient(135deg, #A8615C, #A8615C) !important;
color: #141413 !important;
font-weight: 700;
box-shadow:none;
}
.primary-action:hover, .cadm-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.login-overlay, .commessa-overlay, .cadm-overlay {
background:
radial-gradient(circle at 15% 10%, rgba(92,108,150,.22), transparent 33%),
linear-gradient(145deg, rgba(92,108,150,.98), rgba(10,15,26,.99)) !important;
}
.login-card, .cadm-dialog {
border: 1px solid var(--line) !important;
background: rgba(92,108,150,.94) !important;
box-shadow:none;
backdrop-filter: blur(24px);
}
.login-card h2, .login-brand, .commessa-page-title, .commessa-brand { color: #f4f6fb; }
.login-card label { color: #8496C2; }
.login-hint, .login-hint code { color: #8496C2; }
.commessa-page { color: var(--ink); }
.commessa-page-header { border-bottom-color: var(--line) !important; }
.commessa-view-toggle { border-color: var(--line) !important; background: rgba(255,255,255,.025) !important; }
.commessa-toggle-btn { color: #8496C2 !important; background: transparent !important; }
.commessa-toggle-btn.active { color: var(--hot) !important; background: var(--hot-soft) !important; }
.commessa-card, .commessa-list-row, .commessa-card-new {
border-color: var(--line) !important;
background: linear-gradient(145deg, rgba(92,108,150,.94), rgba(92,108,150,.94)) !important;
box-shadow:none;
}
.commessa-card:hover, .commessa-list-row:hover, .commessa-card-new:hover {
border-color: rgba(168,97,92,.38) !important;
box-shadow:none;
transform: translateY(-3px);
}
.commessa-card-job, .cadm-header-job { color: var(--hot) !important; }
.commessa-card-body h3, .commessa-list-info strong { color: #f3f5fa !important; }
.commessa-card-desc, .commessa-card-meta, .commessa-list-info span { color: var(--muted) !important; }
.commessa-chip.plan-lite { background:rgba(92,108,150,.12); color:#8496C2; }
.commessa-chip.plan-pro { background:rgba(92,108,150,.14); color:#8496C2; }
.commessa-chip.plan-ultra { background:rgba(168,97,92,.14); color:#A8615C; }
.cadm-header, .cadm-footer, .modal-head { border-color: var(--line) !important; background: rgba(12,18,30,.35) !important; }
.cadm-toggle-item, .cadm-user-row, .cadm-mod-toggle, .cadm-user-toggle {
border-color: var(--line) !important;
background: rgba(255,255,255,.025) !important;
color: #8496C2;
}
.cadm-toggle-item:hover, .cadm-user-row:hover, .cadm-mod-toggle:hover, .cadm-user-toggle:hover { background: rgba(255,255,255,.045) !important; }
.cadm-close { color: #8496C2 !important; }
.cadm-divider { border-color: var(--line) !important; }
.modal {
border: 1px solid var(--line);
background: #1C1C1A;
color: var(--ink);
box-shadow:none;
}
.modal::backdrop { background: rgba(5,8,15,.76); backdrop-filter: blur(6px); }
.toast { border: 1px solid var(--line); background: #1C1C1A; color: #F7F6F1; box-shadow:none; }
@media (max-width: 1100px) {
.shell { margin: 8px; height: calc(100vh - 16px); grid-template-columns: 64px 218px 1fr; }
.panel { padding: 18px; }
.hero-grid { padding: 22px; }
}
@media (max-width: 760px) {
.shell { border-radius:0; }
.topbar { padding-inline: 14px; }
.panel { padding: 14px; }
.hero-grid { padding: 18px; }
.hero-grid::after { opacity: .45; }
.kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* ========================================================================== */
/* ElecMount Midnight 2.0 — structural page layouts */
/* ========================================================================== */
:root { --accent: var(--hot); }
.workspace { min-width: 0; }
.panel { overflow-x: hidden; }
.panel-toolbar {
position: sticky; top: 0; z-index: 30; min-height: 48px;
margin: -22px -24px 0; padding: 9px 24px;
border-bottom: 1px solid var(--line);
background: rgba(15,21,34,.9); backdrop-filter: blur(18px);
}
/* Register pages use a compact header; only the dashboard keeps a feature hero. */
.hero-grid.compact {
grid-template-columns: minmax(280px,1fr) auto; align-items: end;
min-height: 0; padding: 18px 22px;
}
.hero-grid.compact::after { width: 150px; height: 150px; top: -105px; right: -45px; }
.hero-grid.compact h1 { margin: 4px 0 5px; font-size: clamp(28px,3vw,38px); line-height: 1.05; }
.hero-grid.compact .hero-copy p { margin-top: 4px; max-width: 620px; font-size: 12px; }
.hero-grid.compact .hero-controls { justify-content: flex-end; flex-wrap: wrap; }
body[data-view="dashboard"] .hero-grid { min-height: 268px; align-items: end; }
body[data-view="dashboard"] .hero-copy h1 { max-width: 720px; font-size: clamp(46px,5vw,68px); }
/* Four reusable page structures: overview, register, split workspace, admin. */
.split-view, .lower-grid { align-items: start; }
.split-view.full-layout, .split-view.production-layout, .split-view.workflow-layout, .split-view.topology-layout { grid-template-columns: minmax(0,1fr); }
.split-view.full-layout #primaryModule,
.split-view.production-layout #primaryModule,
.split-view.workflow-layout:not(.drawer-open) #primaryModule,
.split-view.topology-layout #primaryModule { grid-column: 1 / -1; }
.module { min-width: 0; padding: 18px; }
.module:empty { display: none !important; }
.module-header {
align-items: center; gap: 14px; margin: -2px 0 16px; padding-bottom: 13px;
border-bottom: 1px solid var(--line); background: transparent !important;
}
.module-header h2 { font-size: 17px; letter-spacing: -.01em; }
.module-header > div:last-child, .module-header > button:last-child { flex-shrink: 0; }
/* Data registers gain a bounded viewport and persistent row/column context. */
.table-wrap, .quality-table-wrap, .topology-breakdown {
position: relative; max-width: 100%; overflow: auto; scrollbar-gutter: stable;
}
body[data-view="workqueue"] .table-wrap,
body[data-view="installations"] .table-wrap,
body[data-view="trays"] .table-wrap,
body[data-view="pulling"] .table-wrap,
body[data-view="cables"] .table-wrap,
body[data-view="testing"] .table-wrap,
body[data-view="grounding"] .table-wrap,
body[data-view="checklists"] .table-wrap,
body[data-view="instruments"] .table-wrap,
body[data-view="energization"] .table-wrap,
body[data-view="punchlist"] .table-wrap,
body[data-view="materials"] .table-wrap {
max-height: min(650px, calc(100vh - 330px)); border-radius:0;
}
.workflow-table thead, .quality-steps thead, .instruments-table thead { position: sticky; top: 0; z-index: 12; }
.workflow-table th, .workflow-table td { padding-top: 9px; padding-bottom: 9px; }
.workflow-table tbody tr { transition: background .12s ease; }
.workflow-table tbody tr:nth-child(even) { background: rgba(255,255,255,.012); }
.workflow-table th:first-child, .workflow-table td:first-child {
position: sticky; left: 0; z-index: 7;
background: #1C1C1A !important; box-shadow:none;
}
.workflow-table thead th:first-child { z-index: 15; background: #0D0D0C !important; }
.column-filter-btn, .icon-action, .annex-upload-label {
border: 1px solid var(--line) !important; background: rgba(255,255,255,.04) !important; color: #8496C2 !important;
}
.column-filter-btn:hover, .icon-action:hover, .annex-upload-label:hover { border-color: rgba(168,97,92,.35) !important; color: #fff !important; }
/* Operational cards and state rows no longer reintroduce the legacy light UI. */
.chip { border: 1px solid rgba(168,97,92,.2) !important; background: rgba(168,97,92,.1) !important; color: #A8615C !important; }
.filter-result, .workflow-rule-banner, .panel-hint, .list-row, .empty-state,
.wq-proposal-panel, .wq-proposal-card {
border-color: var(--line) !important; background: rgba(255,255,255,.025) !important; color: var(--ink) !important;
}
.wq-proposal-btn { background: var(--hot-soft) !important; color: #A8615C !important; }
.wq-proposal-btn:hover, .wq-proposal-btn.active { background: var(--hot) !important; color: #0D0D0C !important; }
.eq-row-ready, .equipment-row.eq-row-ready { background: rgba(92,108,150,.08) !important; }
.eq-row-assigned, .equipment-row.eq-row-assigned { background: rgba(92,108,150,.07) !important; }
.eq-row-done, .equipment-row.eq-row-done { background: rgba(92,108,150,.065) !important; }
.planned-cell, .precon-cell, .tray-check-cell, .pull-length-cell, .pull-comment-cell, .pull-notes-cell, .test-annex-cell { background: rgba(168,97,92,.055) !important; }
.status.yes, .status.na, .status.no { background: rgba(255,255,255,.045) !important; }
/* Legends and timelines become compact technical strips. */
.equipment-row-legend, .progress-row-legend, .gantt-legend-panel {
border: 1px solid var(--line) !important; background: rgba(12,18,30,.48) !important;
}
.gantt-track, .ig-track { background: rgba(255,255,255,.045) !important; }
.gantt-date { border-color: var(--line) !important; background: #1C1C1A !important; color: #8496C2 !important; }
.gantt-bar.on-track { background: rgba(92,108,150,.18) !important; }
.gantt-bar.has-late { background: rgba(168,97,92,.15) !important; }
.gantt-bar.all-done { background: rgba(92,108,150,.16) !important; }
.gantt-layout #primaryModule { max-height: calc(100vh - 260px); overflow: auto; }
.gantt-topbar { position: sticky; top: -18px; z-index: 18; padding: 12px 0; background: #1C1C1A; }
/* Predictive is a real dashboard grid rather than nested white sheets. */
.predictive-note {
border-color: rgba(168,97,92,.2) !important;
background: linear-gradient(100deg,rgba(168,97,92,.1),rgba(255,255,255,.02)) !important;
}
.predictive-kpis article, .predictive-card {
border-color: var(--line) !important;
background: linear-gradient(145deg,rgba(92,108,150,.88),rgba(92,108,150,.9)) !important;
box-shadow:none;
}
.predictive-timeline, .cause-list i { background: rgba(255,255,255,.07) !important; }
.predictive-table td { border-color: var(--line) !important; }
.predictive-actions li, .predictive-capacity div { background: rgba(255,255,255,.035) !important; }
.risk-pill.alto,.risk-pill.high { background: rgba(168,97,92,.12) !important; color: #A8615C !important; }
.risk-pill.medio,.risk-pill.medium { background: rgba(168,97,92,.12) !important; color: #A8615C !important; }
.risk-pill.basso,.risk-pill.low { background: rgba(92,108,150,.12) !important; color: #C3BFB1 !important; }
/* Topology becomes a bounded explorer instead of a 4,600px document. */
.topology-layout #primaryModule { max-height: calc(100vh - 250px); overflow: hidden; }
.topology-breakdown { max-height: calc(100vh - 390px); padding-right: 8px; }
.tree-node, .tree-toggle, .node, .topology-legend span {
border-color: var(--line) !important; background: rgba(255,255,255,.03) !important; color: var(--ink) !important;
}
.tree-node:hover { background: rgba(255,255,255,.055) !important; }
.tree-node.selected-node { border-color: rgba(168,97,92,.5) !important; background: rgba(168,97,92,.08) !important; }
.topology-children { border-left-color: #3E3E39; }
.topology-children > .topology-branch > .topology-tree-row::before { border-color: #3E3E39; }
/* Quality, instruments and administration use responsive card collections. */
.quality-plan-list { grid-template-columns: repeat(auto-fit,minmax(420px,1fr)); align-items: start; }
.quality-plan-card, .area-plant-card, .import-card, .report-card, .user-info-card, .user-cred-row {
border-color: var(--line) !important; background: rgba(255,255,255,.025) !important; box-shadow:none;
}
.quality-plan-head, .area-plant-card > header, .import-toolbar {
border-color: var(--line) !important; background: rgba(255,255,255,.035) !important;
}
.quality-type-list span, .quality-evidence, .calibration-status, .quality-status {
border: 1px solid var(--line); background: rgba(255,255,255,.045) !important; color: #8496C2 !important;
}
.quality-status.published, .calibration-status.valid { border-color: rgba(92,108,150,.2); background: rgba(92,108,150,.1) !important; color: #C3BFB1 !important; }
.calibration-status.expired { border-color: rgba(168,97,92,.2); background: rgba(168,97,92,.1) !important; color: #A8615C !important; }
.import-grid { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.area-plant-grid { grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
/* Priority color is conveyed without low-contrast pastel blocks. */
.punch-priority-badge.p1, .punch-priority-badge.p2, .punch-priority-badge.p3,
.mat-alert-badge.open, .mat-alert-badge.ack { border: 1px solid currentColor; background: transparent !important; }
.punch-row.punch-firm-alert { background: rgba(168,97,92,.055) !important; }
/* Dense production summaries and embedded planning use the same dark surface. */
.workflow-kpis > div,
.planning-strip,
.planning-gantt,
.ig-gantt-wrap {
border-color: var(--line) !important;
background: rgba(92,108,150,.96) !important;
color: var(--ink) !important;
}
.workflow-kpis > div span,
.planning-strip small,
.planning-strip-label,
.gantt-legend-item,
.gantt-axis,
.gantt-label,
.gantt-pct { color: #8496C2 !important; }
.workflow-kpis > div strong { color: #F7F6F1 !important; }
.planning-strip-header { border-bottom: 1px solid var(--line); }
.gantt-axis-row, .gantt-row { border-color: rgba(92,108,150,.09) !important; }
.gantt-tick::before, .gantt-tick-minor::before { background: rgba(92,108,150,.1) !important; }
.gantt-today-badge { background: rgba(168,97,92,.12) !important; color: #A8615C !important; }
.gantt-legend-plan { background: rgba(92,108,150,.2) !important; border-color: rgba(92,108,150,.3) !important; }
.gantt-legend-late { background: rgba(168,97,92,.18) !important; border-color: rgba(168,97,92,.3) !important; }
.gantt-legend-done { background: rgba(92,108,150,.7) !important; }
/* Remaining shared primitives from legacy pages. */
.recommendation-list article,
.task-assignment-fieldset,
.crew-summary > div,
.history-list article,
.bars,
.report-strip,
.mini-kpis span,
.schema-list span,
.detail-meta span,
.status,
.supplier-badge,
.column-filter-popover,
.segmented,
.checklist-toolbar,
.tab-bar {
border-color: var(--line) !important;
background: rgba(255,255,255,.028) !important;
color: var(--ink) !important;
}
.plan-line, .track { background: rgba(255,255,255,.07) !important; }
.tab-btn.active, .segmented .active-segment {
background: rgba(168,97,92,.1) !important;
color: #A8615C !important;
box-shadow:none;
}
.ops-table tr.progress-row-active > td { background: rgba(168,97,92,.055) !important; }
.ops-table tr.progress-row-blocked > td { background: rgba(168,97,92,.055) !important; }
.primary-action.ghost { background: rgba(255,255,255,.035) !important; color: #8496C2 !important; }
/* Long-form pages become focused workspaces rather than endless documents. */
.quality-plan-list { grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); }
.quality-plan-card .quality-table-wrap { max-height: 300px; }
body[data-view="exports"] .rpt-doc {
max-height: calc(100vh - 260px); overflow: auto; padding-right: 10px;
scrollbar-gutter: stable;
}
body[data-view="templates"] #primaryModule {
max-height: calc(100vh - 250px); overflow: auto; scrollbar-gutter: stable;
}
body[data-view="exports"] .rpt-cust-header { position: sticky; top: 0; z-index: 20; background: #1C1C1A; }
.code-card { border-color: var(--line) !important; background: rgba(255,255,255,.03) !important; color: var(--ink) !important; }
.code-card code { color: #8496C2 !important; }
/* Project management is an accordion: one project is configured at a time. */
body[data-view="commesse-admin"] #primaryModule { display: grid; gap: 12px; }
.cadm-project-accordion { padding: 0 !important; overflow: clip; }
.cadm-project-accordion > summary { cursor: pointer; list-style: none; user-select: none; }
.cadm-project-accordion > summary::-webkit-details-marker { display: none; }
.cadm-project-accordion[open] > summary { border-bottom: 1px solid var(--line); }
.cadm-project-toggle {
display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
padding: 7px 10px; border: 1px solid var(--line); border-radius:0;
color: #8496C2; font-size: 11px; font-weight: 700;
}
.cadm-project-toggle b { color: var(--hot); transition: transform .16s ease; }
.cadm-project-accordion[open] .cadm-project-toggle b { transform: rotate(180deg); }
.cadm-project-body {
max-height: calc(100vh - 320px); overflow: auto;
padding: 0 16px 16px; scrollbar-gutter: stable;
}
.cadm-project-body .cadm-mod-grid { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.cadm-project-body .cadm-user-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 6px; }
.cadm-project-body .cadm-user-toggle { min-width: 0; }
.cadm-new-project {
grid-template-columns: repeat(2,minmax(0,1fr));
padding: 18px !important; border: 1px solid var(--line) !important; border-radius:0;
background: rgba(255,255,255,.025);
}
.cadm-new-project > strong, .cadm-new-project > button { grid-column: 1 / -1; }
/* ========================================================================== */
/* ElecMount Technical Atlas — editorial redesign */
/* ========================================================================== */
:root {
--atlas-bg: #2E2E2A;
--atlas-canvas: #141413;
--atlas-panel: #1C1C1A;
--atlas-line: rgba(92,108,150,.16);
--atlas-line-strong: rgba(92,108,150,.27);
--atlas-text: #F7F6F1;
--atlas-muted: #8496C2;
--atlas-amber: #A8615C;
--atlas-cyan: #8496C2;
--atlas-red: #A8615C;
}
body {
background: linear-gradient(105deg,#3E3E39 0%,#1C1C1A 48%,#3E3E39 100%) !important;
font-family: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", Avenir, sans-serif;
font-size: 13px;
}
body::before { opacity: .06; background-size: 56px 56px; }
.shell {
width: min(1540px,calc(100vw - 48px));
height: calc(100vh - 48px);
margin: 24px auto;
grid-template-columns: 54px 214px minmax(0,1fr);
border: 0;
border-radius:0;
background: var(--atlas-canvas);
box-shadow:none;
backdrop-filter: none;
}
.shell.sidebar-collapsed { grid-template-columns: 54px 0 minmax(0,1fr); }
.rail {
gap: 10px; padding: 20px 7px;
border-right: 1px solid var(--atlas-line);
background: #0D0D0C;
}
.brand { width: 34px; height: 34px; border-radius:0; font-size: 17px; box-shadow:none; }
.rail-btn,.icon-btn,.round { width: 34px; height: 34px; border-radius:0; font-size: 12px; }
.rail-btn.active,.rail-btn.selected { border-left: 1px solid var(--atlas-amber); background: rgba(168,97,92,.06); box-shadow:none; }
.sidebar {
top: 24px; height: calc(100vh - 48px);
padding: 23px 14px 18px;
border-right: 1px solid var(--atlas-line);
background: #141413;
}
.project-title { margin: 0 5px 20px; }
.project-title strong { font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.project-title span { font-size: 10px; letter-spacing: .08em; }
.commessa-exit-btn { padding-left: 0 !important; color: var(--atlas-amber) !important; }
.tree { gap: 0; }
.tree p { margin: 15px 5px 4px; font-size: 8px; letter-spacing: .18em; font-weight: 600; }
.tree p::after { background: var(--atlas-line); }
.tree a {
min-height: 25px; padding: 4px 6px;
border: 0; border-radius:0;
color: #8496C2; font-size: 10.5px; font-weight: 500;
}
.tree a::before { width: 14px; flex-basis: 14px; font-size: 10px; }
.tree a:hover { background: transparent; color: #fff; transform: none; }
.tree a.selected {
border: 0; border-left: 1px solid var(--atlas-amber); border-radius:0;
background: linear-gradient(90deg,rgba(168,97,92,.1),transparent) !important;
color: #A8615C; box-shadow:none;
}
.sidebar-card {
margin-top: 18px !important; padding: 10px 0 !important;
border-width: 1px 0 0 !important; border-radius:0;
background: transparent !important;
}
.user-info-card { padding: 0 !important; border: 0 !important; background: transparent !important; }
.user-avatar-lg { width: 30px; height: 30px; font-size: 10px; }
.user-info-text strong { font-size: 10px; }
.user-info-text small { font-size: 8px; }
.logout-btn { min-height: 28px !important; border-radius:0; }
.workspace { background: var(--atlas-canvas); }
.topbar {
min-height: 54px; padding: 8px 28px;
border-bottom: 1px solid var(--atlas-line);
background: transparent;
}
.search {
width: min(390px,44vw); height: 34px;
padding: 0 10px; border-width: 0 0 1px !important; border-radius:0;
background: transparent !important;
}
.search:focus-within { border-color: var(--atlas-amber) !important; box-shadow:none; }
.top-actions select { min-height: 30px; border-radius:0; background: transparent !important; }
.avatar,.plus-btn { width: 34px !important; height: 34px !important; border-radius:0; background: transparent !important; }
.plus-btn { border: 1px solid rgba(168,97,92,.45) !important; color: var(--atlas-amber) !important; box-shadow:none; }
.panel { padding: 0 28px 48px; }
.panel-toolbar {
position: static; min-height: 46px;
margin: 0; padding: 8px 0;
border-bottom: 0; background: transparent; backdrop-filter: none;
}
.crew,#roleChip { border: 0; border-radius:0; background: transparent !important; }
.crew .chip,#roleChip .chip {
min-height: 22px; padding: 0 7px;
border-width: 0 0 1px !important; border-radius:0;
background: transparent !important; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
}
/* Editorial page heading: typography and alignment, no container card. */
.hero-grid,.hero-grid.compact {
grid-template-columns: minmax(0,1fr) auto;
min-height: 0; margin: 0; padding: 25px 0 22px;
border: 0; border-bottom: 1px solid var(--atlas-line-strong); border-radius:0;
background: transparent; box-shadow:none;
}
.hero-grid::after { display: none; }
.eyebrow { color: var(--atlas-muted) !important; font-size: 8px !important; font-weight: 500 !important; letter-spacing: .2em !important; }
.hero-copy h1,.hero-grid.compact h1,body[data-view="dashboard"] .hero-copy h1 {
margin: 7px 0 8px; max-width: none;
color: var(--atlas-text); font-size: clamp(30px,3.3vw,48px); font-weight: 300 !important;
line-height: .98; letter-spacing: .01em;
}
.hero-copy p,.hero-grid.compact .hero-copy p { max-width: 650px; color: var(--atlas-muted) !important; font-size: 10px; line-height: 1.45; }
body[data-view="dashboard"] .hero-grid { min-height: 210px; }
.hero-controls { align-self: end; gap: 16px; }
.hero-controls select {
min-height: 30px; padding: 0 24px 0 4px;
border-width: 0 0 1px !important; border-radius:0;
background: transparent !important; color: #8496C2 !important; font-size: 10px;
}
.toggle { color: #8496C2; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.toggle span { width: 27px; height: 14px; padding: 2px; background: #1C1C1A; }
.toggle span::after { width: 10px; height: 10px; }
.toggle input:checked + span::after { transform: translateX(13px); background: var(--atlas-amber); }
.metric-line { gap: 8px; }
.metric-line span { font-size: 36px; font-weight: 300 !important; }
.metric-line b,.metric-line strong { min-height: 22px; padding: 0 8px; border-radius:0; font-size: 9px; font-weight: 500; }
/* KPI language: rings on overview, rule-separated figures on registers. */
.kpis { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 0; border-bottom: 1px solid var(--atlas-line-strong); }
.kpi-card,.kpi-card.hot {
min-height: 92px; padding: 17px 20px;
border: 0; border-right: 1px solid var(--atlas-line); border-radius:0;
background: transparent !important; box-shadow:none;
}
.kpi-card:last-child { border-right: 0; }
.kpi-card::before { display: none; }
.kpi-card span { color: var(--atlas-muted) !important; font-size: 8px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.kpi-card strong { margin-top: 7px; color: var(--atlas-text); font-size: 24px; font-weight: 300; }
.kpi-card .trend { color: #8496C2 !important; font-size: 8px; }
body[data-view="materials"] #kpiGrid .kpi-val {
color: var(--atlas-text) !important;
font-size: 30px !important;
font-weight: 650 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
body[data-view="materials"] #kpiGrid .kpi-lbl {
color: var(--atlas-muted) !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
letter-spacing: .055em !important;
}
body[data-view="dashboard"] .kpis { padding: 24px 0; }
body[data-view="dashboard"] .kpi-card { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 15px; min-height: 112px; }
body[data-view="dashboard"] .kpi-card strong {
grid-row: 1 / 3; grid-column: 1; display: grid; place-items: center;
width: 68px; height: 68px; margin: 0; border-radius:0;
background: radial-gradient(circle at center,var(--atlas-canvas) 56%,transparent 58%),conic-gradient(var(--atlas-amber) var(--kpi-value,35%),#3E3E39 0);
font-size: 15px;
}
body[data-view="dashboard"] .kpi-card:nth-child(2) strong { background: radial-gradient(circle at center,var(--atlas-canvas) 56%,transparent 58%),conic-gradient(var(--atlas-red) var(--kpi-value,35%),#3E3E39 0); }
body[data-view="dashboard"] .kpi-card:nth-child(3) strong { background: radial-gradient(circle at center,var(--atlas-canvas) 56%,transparent 58%),conic-gradient(var(--atlas-cyan) var(--kpi-value,35%),#3E3E39 0); }
/* Modules are regions on one continuous technical canvas. */
.split-view,.lower-grid { gap: 0; margin: 0; }
.module,.module.accent,.cadm-card {
padding: 22px 18px;
border: 0 !important; border-right: 1px solid var(--atlas-line) !important; border-bottom: 1px solid var(--atlas-line) !important;
border-radius:0; background: transparent !important; box-shadow:none;
}
.split-view > .module:last-child,.lower-grid > .module:last-child { border-right: 0 !important; }
.module-header {
margin: 0 0 15px; padding: 0 0 9px;
border-bottom: 1px solid var(--atlas-line); background: transparent !important;
}
.module-header h2,.module h2 { font-size: 13px; font-weight: 400; letter-spacing: .04em; }
.module-subtitle { font-size: 9px; line-height: 1.4; }
.filter-btn,.cadm-btn-secondary {
min-height: 27px; padding: 0 8px;
border-width: 0 0 1px !important; border-radius:0;
background: transparent !important; color: #8496C2 !important; font-size: 9px; font-weight: 500;
}
.filter-btn:hover { border-color: var(--atlas-amber) !important; color: #fff !important; }
.primary-action,.cadm-btn-primary {
min-height: 30px; border: 1px solid rgba(168,97,92,.65) !important; border-radius:0;
background: transparent !important; color: var(--atlas-amber) !important;
font-size: 9px; letter-spacing: .06em; text-transform: uppercase; box-shadow:none;
}
/* Registers are technical ledgers, not boxed data grids. */
.table-wrap,.quality-table-wrap {
border-width: 1px 0 0 !important; border-radius:0; background: transparent;
}
.workflow-table,table { color: #8496C2; font-size: 9px; }
.workflow-table thead th,table thead th {
padding: 8px 7px; border-bottom: 1px solid var(--atlas-line-strong) !important;
background: #141413 !important; color: #8496C2 !important; font-size: 7px; font-weight: 500; letter-spacing: .13em;
}
.workflow-table td,table td { padding: 7px; border-bottom: 1px solid rgba(92,108,150,.08) !important; }
.workflow-table tbody tr:nth-child(even) { background: rgba(255,255,255,.008); }
.workflow-table tbody tr:hover,table tbody tr:hover { background: rgba(92,108,150,.035) !important; }
.workflow-table th:first-child,.workflow-table td:first-child { background: #141413 !important; box-shadow:none; }
.status,.commessa-chip,.quality-status,.calibration-status,.risk-pill {
min-height: 19px; padding: 2px 6px; border-radius:0; font-size: 7px; letter-spacing: .05em; text-transform: uppercase;
}
/* Specialized pages share the same flat, diagram-first vocabulary. */
.predictive-kpis article,.predictive-card,.quality-plan-card,.area-plant-card,.import-card,.report-card,.code-card,
.filter-result,.workflow-rule-banner,.list-row,.empty-state,.wq-proposal-panel,.wq-proposal-card,
.planning-strip,.planning-gantt,.ig-gantt-wrap {
border: 1px solid var(--atlas-line) !important; border-radius:0;
background: transparent !important; box-shadow:none;
}
.predictive-grid { gap: 1px; background: var(--atlas-line); }
.predictive-card { margin: 0; }
.predictive-kpis { gap: 1px; background: var(--atlas-line); }
.predictive-kpis article { border: 0 !important; background: var(--atlas-canvas) !important; }
.tree-node,.tree-toggle,.node,.topology-legend span {
border-radius:0; background: transparent !important;
}
.tree-node { min-height: 42px; }
.quality-plan-list,.area-plant-grid,.import-grid { gap: 1px; background: var(--atlas-line); }
.quality-plan-card,.area-plant-card,.import-card { border: 0 !important; background: var(--atlas-canvas) !important; }
.quality-plan-head,.area-plant-card > header,.import-toolbar { border-radius:0; background: rgba(255,255,255,.015) !important; }
.cadm-project-accordion { margin: 0; border-bottom: 1px solid var(--atlas-line) !important; }
.cadm-project-toggle { border-width: 0 0 1px; border-radius:0; }
/* Entry points and dialogs follow the same technical atlas. */
.login-overlay,.commessa-overlay,.cadm-overlay { background: linear-gradient(105deg,#3E3E39,#1C1C1A) !important; }
.login-card,.cadm-dialog {
border: 1px solid var(--atlas-line-strong) !important; border-radius:0;
background: var(--atlas-canvas) !important; box-shadow:none;
}
.login-brand-icon,.commessa-card-logo,.cadm-card-logo { border-radius:0; box-shadow:none; }
.login-card input { border-width: 0 0 1px !important; border-radius:0; background: transparent !important; }
.commessa-page { max-width: 1180px; }
.commessa-page-header { border-bottom: 1px solid var(--atlas-line); }
.commessa-grid { gap: 1px; background: var(--atlas-line); }
.commessa-card,.commessa-card-new,.commessa-list-row {
min-height: 176px; border: 0 !important; border-radius:0;
background: var(--atlas-canvas) !important; box-shadow:none;
}
.commessa-card:hover,.commessa-card-new:hover,.commessa-list-row:hover {
background: #1C1C1A !important; box-shadow:none; transform: none;
}
.commessa-card-body h3 { font-size: 15px; font-weight: 400; }
.commessa-card-job { font-size: 8px; letter-spacing: .14em; }
.commessa-card-desc,.commessa-card-meta { font-size: 9px; }
.cadm-header,.cadm-footer,.modal-head { background: transparent !important; }
.modal { border-radius:0; background: var(--atlas-canvas); }
@media (max-width: 1100px) {
.shell { width: calc(100vw - 16px); height: calc(100vh - 16px); margin: 8px; }
.hero-grid,.hero-grid.compact { grid-template-columns: 1fr; gap: 16px; }
.hero-controls { justify-content: flex-start !important; }
.kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
.kpi-card:nth-child(2) { border-right: 0; }
}
@media (max-width: 760px) {
.panel { padding-inline: 14px; }
.topbar { padding-inline: 14px; }
.kpis { grid-template-columns: 1fr; }
.kpi-card { border-right: 0; border-bottom: 1px solid var(--atlas-line); }
body[data-view="dashboard"] .kpi-card { grid-template-columns: 62px 1fr; }
body[data-view="dashboard"] .kpi-card strong { width: 56px; height: 56px; }
}
@media (max-width: 980px) {
.hero-grid.compact { grid-template-columns: 1fr; align-items: start; }
.hero-grid.compact .hero-controls { justify-content: flex-start; }
.predictive-grid { grid-template-columns: 1fr; }
.quality-plan-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.panel-toolbar { margin: -14px -14px 0; padding-inline: 14px; }
.hero-grid.compact { padding: 15px; }
.hero-controls { width: 100%; }
.hero-controls select { flex: 1 1 150px; min-width: 0; }
.module { padding: 14px; }
.quality-plan-list, .area-plant-grid, .import-grid { grid-template-columns: 1fr; }
}
/* Final full-canvas overrides: intentionally last in the cascade. */
:root {
--atlas-bg:#141413; --atlas-canvas:#141413; --atlas-panel:#1C1C1A;
--atlas-line:rgba(92,108,150,.18); --atlas-line-strong:rgba(92,108,150,.30);
--atlas-text:#f1f3f8; --atlas-muted:#8496C2; --atlas-amber:#A8615C;
--atlas-cyan:#8496C2; --atlas-red:#A8615C;
--ok:#6E8F6B; --warn:#A8615C; --critical:#A8615C; --blue:#8496C2; --hot:#A8615C; --accent:#A8615C;
}
html,body { width:100%; min-height:100%; background:var(--atlas-canvas) !important; }
body::before { opacity:.035; }
.shell {
width:100%; height:100vh; margin:0; grid-template-columns:64px 238px minmax(0,1fr);
border:0; border-radius:0; background:var(--atlas-canvas); box-shadow:none;
}
.shell.sidebar-collapsed { grid-template-columns:64px 0 minmax(0,1fr); }
.rail { gap:12px; padding:18px 11px; background:#0D0D0C; }
.brand { width:42px; height:42px; font-size:19px; }
.rail-btn,.icon-btn,.round { width:42px; height:42px; font-size:16px; }
.sidebar { top:0; height:100vh; padding:24px 17px 19px; background:#141413; }
.project-title { margin:0 6px 22px; }
.project-title strong { font-size:17px; }
.project-title span { font-size:11px; line-height:1.45; }
.tree p { margin:17px 6px 6px; font-size:9.5px; }
.tree a { min-height:32px; padding:6px 8px; color:#8496C2; font-size:12.5px; line-height:1.35; }
.tree a::before { width:17px; flex-basis:17px; font-size:12px; }
.sidebar-card span { font-size:10px; }
.sidebar-card small,.user-info-text small { font-size:10px; line-height:1.4; }
.user-info-text strong { font-size:12px; }
.user-avatar-lg { width:36px; height:36px; font-size:12px; }
.workspace { background:var(--atlas-canvas) !important; }
.topbar { min-height:64px; padding:10px 32px; background:var(--atlas-canvas); }
.search { width:min(460px,48vw); height:40px; font-size:13px; }
.top-actions select { min-height:36px; font-size:12px; }
.avatar,.plus-btn { width:40px !important; height:40px !important; font-size:15px; }
.panel {
padding:0 32px 52px !important; border:0 !important; border-radius:0;
outline:0 !important; background:transparent !important; box-shadow:none !important;
}
.panel-toolbar { min-height:52px; padding:9px 0; }
.crew .chip,#roleChip .chip { min-height:26px; font-size:10px; }
.eyebrow { font-size:9.5px !important; }
.hero-copy p,.hero-grid.compact .hero-copy p { max-width:760px; font-size:12.5px; line-height:1.55; }
.hero-controls select { min-height:36px; font-size:12px; }
.toggle { font-size:11px; }
.metric-line b,.metric-line strong { min-height:27px; font-size:10.5px; }
.kpi-card span { font-size:10px; }
.kpi-card strong { font-size:28px; }
.kpi-card .trend { font-size:10.5px; line-height:1.4; }
body[data-view="dashboard"] .kpi-card { grid-template-columns:82px 1fr; min-height:128px; }
body[data-view="dashboard"] .kpi-card strong { width:76px; height:76px; font-size:17px; }
.module,.module.accent,.cadm-card { padding:24px 21px; }
.module-header h2,.module h2 { font-size:16px; }
.module-subtitle { font-size:11.5px; line-height:1.5; }
.filter-btn,.cadm-btn-secondary,.primary-action,.cadm-btn-primary { min-height:34px; padding-inline:11px; font-size:11px; }
.workflow-table,table { font-size:11px; }
.workflow-table thead th,table thead th { padding:10px 9px; color:#8496C2 !important; font-size:9px; }
.workflow-table td,table td { padding:9px; }
.status,.commessa-chip,.quality-status,.calibration-status,.risk-pill { min-height:23px; padding:3px 8px; font-size:9px; }
.metric-line b,.quality-status.published,.calibration-status.valid,.risk-pill.basso {
border-color:rgba(92,108,150,.26) !important; background:rgba(92,108,150,.10) !important; color:#C3BFB1 !important;
}
.metric-line strong,.calibration-status.expired,.risk-pill.alto,.dash-donut-tag.critical {
border-color:rgba(168,97,92,.28) !important; background:rgba(168,97,92,.10) !important; color:#A8615C !important;
}
.eq-row-done,.equipment-row.eq-row-done { background:rgba(92,108,150,.055) !important; }
.planned-cell,.precon-cell,.tray-check-cell,.pull-length-cell,.pull-comment-cell,.pull-notes-cell,.test-annex-cell,
.ops-table tr.progress-row-blocked > td { background:rgba(168,97,92,.05) !important; }
.workflow-table tbody tr:hover,table tbody tr:hover { background:rgba(92,108,150,.045) !important; }
.login-overlay,.commessa-overlay,.cadm-overlay { background:var(--atlas-canvas) !important; }
@media (max-width:1100px) {
.shell { width:100%; height:100vh; margin:0; grid-template-columns:60px 222px minmax(0,1fr); }
.sidebar { top:0; height:100vh; }
.panel { padding-inline:22px !important; }
}
@media (max-width:760px) {
.shell { width:100%; height:100vh; margin:0; border-radius:0; }
.panel { padding-inline:15px !important; }
.topbar { padding-inline:15px; }
}
/* Aryvor brand foundation — source of truth from the approved identity board. */
:root {
--aryvor-bg:#0D0D0C;
--aryvor-surface:#1C1C1A;
--aryvor-primary:#5C6C96;
--aryvor-secondary:#8496C2;
--aryvor-text:#e9e9ed;
--aryvor-muted:#A3A29B;
--atlas-bg:var(--aryvor-bg);
--atlas-canvas:var(--aryvor-bg);
--atlas-panel:var(--aryvor-surface);
--atlas-text:var(--aryvor-text);
--atlas-muted:var(--aryvor-muted);
--atlas-amber:var(--aryvor-primary);
--hot:var(--aryvor-primary);
--hot-soft:rgba(92,108,150,.14);
--accent:var(--aryvor-primary);
--violet:var(--aryvor-primary);
}
html,body,.workspace,.topbar,.login-overlay,.commessa-overlay,.cadm-overlay {
background:var(--aryvor-bg) !important;
}
body,button,input,select,textarea { font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-weight:500; }
h1,h2,h3,h4,h5,h6,strong,b,.hero-copy h1,.hero-grid.compact h1,.module-header h2,.module h2 {
font-weight:500 !important;
}
.brand,.login-brand-icon {
display:grid; place-items:center; background:transparent !important; color:var(--aryvor-primary) !important; box-shadow:none !important;
}
.brand img { width:34px; height:34px; }
.login-brand-icon { width:42px; height:42px; }
.login-brand-icon img { width:34px; height:34px; }
.login-brand,.commessa-brand { color:var(--aryvor-text) !important; }
.rail-btn.active,.rail-btn.selected {
border-left-color:var(--aryvor-primary) !important;
background:rgba(92,108,150,.09) !important;
color:var(--aryvor-secondary) !important;
}
.tree a.selected {
border-left-color:var(--aryvor-primary) !important;
background:linear-gradient(90deg,rgba(92,108,150,.14),transparent) !important;
color:var(--aryvor-secondary) !important;
}
.tree a.selected::before,.commessa-exit-btn,.commessa-card-job,.cadm-header-job,.cadm-project-toggle b {
color:var(--aryvor-primary) !important;
}
.plus-btn,.avatar {
border-color:rgba(92,108,150,.48) !important;
color:var(--aryvor-secondary) !important;
}
.plus-btn { background:rgba(92,108,150,.08) !important; }
.search:focus-within,input:focus,select:focus,textarea:focus,.settings-select:focus,.cadm-input:focus {
border-color:rgba(92,108,150,.72) !important;
box-shadow:none;
}
.primary-action,.cadm-btn-primary {
border-color:var(--aryvor-primary) !important;
background:transparent !important;
color:var(--aryvor-secondary) !important;
box-shadow:none !important;
}
.primary-action:hover,.cadm-btn-primary:hover {
background:var(--aryvor-primary) !important;
color:var(--aryvor-bg) !important;
}
.chip,.tab-btn.active,.segmented .active-segment,.wq-proposal-btn {
border-color:rgba(92,108,150,.30) !important;
background:rgba(92,108,150,.11) !important;
color:var(--aryvor-secondary) !important;
}
body[data-view="dashboard"] .kpi-card:first-child strong,
body[data-view="dashboard"] .kpi-card:nth-child(4) strong {
background:radial-gradient(circle at center,var(--aryvor-bg) 56%,transparent 58%),conic-gradient(var(--aryvor-primary) var(--kpi-value,35%),#2E2E2A 0);
}
.commessa-card:hover,.commessa-card-new:hover,.commessa-list-row:hover {
box-shadow:none;
}
::selection { background:rgba(92,108,150,.38); color:#fff; }
/* Aryvor component texture — one geometry and one surface language. */
:root {
--aryvor-canvas:#0D0D0C;
--aryvor-elevated:#141413;
--aryvor-surface:#1C1C1A;
--aryvor-border:#3E3E39;
--aryvor-border-strong:#3E3E39;
--aryvor-success:#6E8F6B;
--aryvor-warning:#B99B57;
--aryvor-danger:#A8615C;
--aryvor-info:#8496C2;
--radius-panel:8px;
--radius-control:6px;
--radius-modal:12px;
--line:var(--aryvor-border);
--atlas-line:var(--aryvor-border);
--atlas-line-strong:var(--aryvor-border-strong);
--ok:var(--aryvor-success);
--warn:var(--aryvor-warning);
--critical:var(--aryvor-danger);
--blue:var(--aryvor-info);
}
/* Sidebar: SVG icon set and compact plus/minus accordions. */
.tree { gap:3px; }
.tree p {
min-height:34px; margin:12px 0 3px; padding:0 4px 0 8px;
gap:10px; color:#A3A29B; font-size:10px; letter-spacing:.16em;
}
.tree p::after { display:none; }
.tree p button {
width:24px; height:24px; margin-left:auto; flex:0 0 24px;
border:1px solid transparent; border-radius:0;
color:#A3A29B; font-size:16px; font-weight:500;
transform:none !important; transition:border-color .14s ease,background .14s ease,color .14s ease;
}
.tree p button:hover {
border-color:var(--aryvor-border); background:rgba(92,108,150,.08); color:var(--aryvor-secondary);
}
.tree a {
gap:10px; min-height:36px; padding:7px 9px; border-radius:0;
color:#C3BFB1; font-size:12.5px;
}
.tree a::before { display:none !important; content:none !important; }
.tree a .nav-svg {
width:18px; height:18px; flex:0 0 18px; color:#8496C2;
opacity:.92; transition:color .14s ease,opacity .14s ease;
}
.tree a:hover { background:rgba(255,255,255,.025); color:var(--aryvor-text); transform:none; }
.tree a:hover .nav-svg { color:#8496C2; opacity:1; }
.tree a.selected {
border:0 !important; border-left:2px solid var(--aryvor-primary) !important;
border-radius:0; color:var(--aryvor-secondary) !important;
}
.tree a.selected .nav-svg { color:var(--aryvor-primary); opacity:1; }
/* Consistent panels: only pills and avatars remain fully rounded. */
.module,.module.accent,.cadm-card,.planning-strip,.planning-gantt,.ig-gantt-wrap,
.equipment-row-legend,.progress-row-legend,.gantt-legend-panel,.workflow-rule-banner,
.predictive-card,.predictive-kpis article,.quality-plan-card,.area-plant-card,.import-card,
.report-card,.code-card,.filter-result,.list-row,.empty-state,.wq-proposal-panel,.wq-proposal-card,
.readonly-banner,.qc-workspace-intro,.selection-action-bar,.table-wrap,.quality-table-wrap,
.login-card,.cadm-dialog,.modal,.sidebar-card,.commessa-view-toggle {
border:1px solid var(--aryvor-border) !important;
border-radius:0;
background:var(--aryvor-elevated) !important;
box-shadow:none !important;
}
.module,.module.accent,.cadm-card { background:#1C1C1A !important; }
.quality-plan-head,.area-plant-card>header,.import-toolbar,.cadm-header,.cadm-footer,.modal-head {
border-radius:0;
background:rgba(255,255,255,.018) !important;
}
.filter-btn,.cadm-btn-secondary,.primary-action,.cadm-btn-primary,.column-filter-btn,
.icon-action,.annex-upload-label,.settings-select,input,select,textarea {
border-radius:0;
}
.status,.commessa-chip,.quality-status,.calibration-status,.risk-pill,.chip,
.avatar,.plus-btn,.user-avatar-lg { border-radius:0; }
/* Dark semantic rows: meaning without the legacy pastel sheets. */
.ops-table tr.progress-row-ready>td,.equipment-row.eq-row-ready>td {
background:rgba(92,108,150,.075) !important; color:var(--aryvor-text) !important;
}
.ops-table tr.progress-row-assigned>td,.equipment-row.eq-row-assigned>td {
background:rgba(92,108,150,.075) !important; color:var(--aryvor-text) !important;
}
.ops-table tr.progress-row-active>td {
background:rgba(189,163,111,.085) !important; color:var(--aryvor-text) !important;
}
.ops-table tr.progress-row-done>td,.equipment-row.eq-row-done>td {
background:rgba(92,108,150,.085) !important; color:var(--aryvor-text) !important;
}
.ops-table tr.progress-row-blocked>td {
background:rgba(168,97,92,.09) !important; color:var(--aryvor-text) !important;
}
.ops-table tr[class*="progress-row"]>td strong,.equipment-row[class*="eq-row"]>td strong { color:var(--aryvor-text) !important; }
.ops-table tr[class*="progress-row"]>td small,.equipment-row[class*="eq-row"]>td small { color:#A3A29B !important; }
.progress-legend-ready,.eq-legend-ready { background:rgba(92,108,150,.35) !important; }
.progress-legend-assigned,.eq-legend-assigned { background:rgba(92,108,150,.35) !important; }
.progress-legend-active,.eq-legend-progress { background:rgba(189,163,111,.42) !important; }
.progress-legend-done,.eq-legend-done { background:rgba(92,108,150,.45) !important; }
.progress-legend-blocked { background:rgba(168,97,92,.45) !important; }
.equipment-row-legend i,.progress-row-legend i { border-color:rgba(255,255,255,.10) !important; border-radius:0; }
/* Gantt and status colours use the same muted semantic family. */
.planning-gantt .gantt-bar.on-track,.gantt-bar.on-track { background:rgba(92,108,150,.22) !important; border-color:rgba(92,108,150,.55) !important; }
.planning-gantt .gantt-bar.has-late,.gantt-bar.has-late { background:rgba(168,97,92,.20) !important; border-color:rgba(168,97,92,.62) !important; }
.planning-gantt .gantt-bar.all-done,.gantt-bar.all-done { background:rgba(92,108,150,.20) !important; border-color:rgba(92,108,150,.58) !important; }
.planning-gantt .gantt-done-fill,.gantt-done-fill { background:var(--aryvor-success) !important; }
.gantt-legend-done { background:var(--aryvor-success) !important; }
.gantt-legend-plan { background:rgba(92,108,150,.28) !important; border-color:rgba(92,108,150,.52) !important; }
.gantt-legend-late { background:rgba(168,97,92,.28) !important; border-color:rgba(168,97,92,.54) !important; }
.gantt-date { border-radius:0; background:var(--aryvor-surface) !important; color:var(--aryvor-text) !important; }
.gantt-track,.ig-track { background:#1C1C1A !important; }
.gantt-pct { color:var(--aryvor-text) !important; }
/* Planning tracker: Aryvor visual system and resource allocation. */
.ig-gantt-wrap { padding:12px; border:1px solid var(--aryvor-border) !important; border-radius:0; background:linear-gradient(145deg,#141413,#141413) !important; }
.ig-axis-row { position:sticky; top:0; z-index:12; margin-bottom:10px; border:0; background:#141413; }
.ig-axis { height:34px; border:1px solid var(--aryvor-border); border-radius:0; background:repeating-linear-gradient(90deg,rgba(92,108,150,.035) 0,rgba(92,108,150,.035) calc(10% - 1px),rgba(92,108,150,.14) calc(10% - 1px),rgba(92,108,150,.14) 10%) !important; }
.ig-tick { top:3px; color:#A3A29B; font-size:9px; letter-spacing:.03em; text-transform:uppercase; }
.ig-today-line { background:var(--aryvor-danger); box-shadow:none; }
.ig-today-badge { top:-1px; padding:2px 5px; border-radius:0; background:var(--aryvor-danger); color:#fff; }
.ig-area-group { margin-bottom:12px; border:1px solid var(--aryvor-border); border-radius:0; background:#1C1C1A; box-shadow:none; }
.ig-area-header { min-height:43px; padding:7px 10px; border-color:var(--aryvor-border); background:linear-gradient(90deg,rgba(92,108,150,.13),rgba(92,108,150,.055)); }
.ig-area-header>div.ig-area-identity { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ig-area-header strong { color:var(--aryvor-text); font-size:12px; letter-spacing:.02em; }
.ig-area-header small { color:#A3A29B; }
.planning-resource-chip,.planning-group-chip { display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border:1px solid rgba(255,255,255,.08); border-radius:0; font-size:9px; font-weight:700; }
.planning-resource-chip { margin-left:5px; background:rgba(92,108,150,.12); color:#C3BFB1; }
.operational-quick-filters { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:10px 0 12px; padding:9px 11px; border:1px solid var(--line); border-radius:0; background:rgba(255,255,255,.018); }
.operational-quick-filters>span { margin-right:3px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.quick-filter-chip,.quick-filter-clear { min-height:29px; padding:5px 10px; border:1px solid rgba(92,108,150,.3); border-radius:0; background:rgba(92,108,150,.06); color:var(--text); font:inherit; font-size:10px; font-weight:700; cursor:pointer; }
.quick-filter-chip:hover { border-color:rgba(92,108,150,.65); background:rgba(92,108,150,.12); }
.quick-filter-chip.active { border-color:#5C6C96; background:rgba(92,108,150,.25); color:#8496C2; box-shadow:none; }
.quick-filter-clear { margin-left:auto; border-color:transparent; background:transparent; color:var(--muted); }
.quick-filter-clear:hover { color:var(--text); }
.planning-group-chip { background:color-mix(in srgb,var(--group-color) 14%,transparent); color:#E3E0D5; }
.planning-group-chip::before { content:""; width:5px; height:5px; margin-right:5px; border-radius:0; background:var(--group-color); }
.ig-row { min-height:40px; border-color:rgba(255,255,255,.055); }
.ig-row:hover { background:rgba(92,108,150,.035); }
.ig-row-label { width:195px; padding:0 11px; }
.ig-row-label span { color:#d3d3db; font-size:10px; }
.ig-track { height:40px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) calc(10% - 1px),rgba(255,255,255,.06) calc(10% - 1px),rgba(255,255,255,.06) 10%) !important; }
.ig-bar { top:7px; height:26px; border:1px solid rgba(255,255,255,.16); border-radius:0; box-shadow:none; }
.ig-bar-fill { opacity:.62; }
.ig-bar-label { font-size:9px; letter-spacing:.02em; }
.gantt-legend-panel { border-radius:0; background:linear-gradient(120deg,rgba(92,108,150,.07),rgba(92,108,150,.035)) !important; }
.gantt-key-fill { background:linear-gradient(90deg,var(--aryvor-primary) 0 65%,rgba(92,108,150,.18) 65% 100%) !important; }
.gantt-key-plan { border-color:rgba(92,108,150,.42) !important; background:rgba(92,108,150,.18) !important; }
.gantt-key-late { border-color:var(--aryvor-danger) !important; background:rgba(168,97,92,.18) !important; }
.planning-resources-form { width:min(820px,82vw); max-height:72vh; overflow:auto; padding-right:4px; }
.planning-resources-form>p { margin:0 0 12px; color:var(--muted); font-size:12px; }
.planning-resource-editor { margin-bottom:10px; padding:12px; border:1px solid var(--line); border-radius:0; background:rgba(255,255,255,.025); }
.planning-resource-editor header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.planning-resource-editor header div strong,.planning-resource-editor header div small { display:block; }
.planning-resource-editor header div small { margin-top:2px; color:var(--muted); font-size:10px; }
.planning-resource-editor header label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; }
.planning-resource-editor input[type="number"] { width:76px; }
.planning-resource-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.planning-resource-groups label { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:0; cursor:pointer; }
.planning-resource-groups label span strong,.planning-resource-groups label span small { display:block; }
.planning-resource-groups label span small { margin-top:2px; color:var(--muted); font-size:9px; }
.planning-resource-notes { display:grid; gap:4px; margin-top:9px; color:var(--muted); font-size:10px; }
.planning-resource-actions { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:8px; padding:10px 0 0; background:var(--surface); }
@media(max-width:760px){.planning-resource-groups{grid-template-columns:1fr}.planning-resources-form{width:80vw}.ig-area-header>div.ig-area-identity{align-items:flex-start}.planning-resource-chip{margin-left:0}}
.planning-wizard-modal { display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 90px); }
.planning-wizard-intro p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.planning-wizard-scroll { display:grid; gap:12px; overflow-y:auto; padding-right:4px; }
.planning-wizard-phase { border:1px solid var(--line); border-radius:0; background:rgba(255,255,255,.02); }
.planning-wizard-phase>header { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); background:var(--phase-tint); }
.planning-wizard-phase>header span { width:9px; height:9px; border-radius:50%; background:var(--phase-color); }
.planning-wizard-phase-body { padding:10px 12px; }
.planning-wizard-columns { display:grid; grid-template-columns:minmax(0,1fr) 1fr 1fr; gap:10px; margin-bottom:6px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.planning-wizard-row { display:grid; grid-template-columns:minmax(0,1fr) 1fr 1fr; align-items:center; gap:10px; padding:6px 0; border-top:1px solid rgba(255,255,255,.05); }
.planning-wizard-row:first-of-type { border-top:0; }
.planning-wizard-row label { display:flex; flex-direction:column; gap:3px; min-width:0; }
.planning-wizard-row label span { color:var(--muted); font-size:9px; }
.planning-wizard-area { overflow:hidden; font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.planning-wizard-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:4px; border-top:1px solid var(--line); }
@media(max-width:640px){.planning-wizard-columns,.planning-wizard-row{grid-template-columns:1fr}}
.modal:has(.planning-resources-form) { width:min(860px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow-y:auto; }
.modal:has(.planning-wizard-modal) { width:min(760px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow-y:auto; }
.weekly-workforce-planning { margin-top:12px; border-color:rgba(92,108,150,.28); background:linear-gradient(145deg,rgba(92,108,150,.075),rgba(92,108,150,.035)); }
.weekly-workforce-planning>.module-header { align-items:flex-end; }
.weekly-planning-date { display:grid; gap:4px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.weekly-planning-date input { min-width:145px; }
.weekly-area-plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.weekly-area-plan { min-width:0; padding:11px; border:1px solid var(--line); border-radius:0; background:rgba(17,18,27,.46); }
.weekly-area-plan header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.weekly-area-plan header>div strong,.weekly-area-plan header>div small { display:block; }
.weekly-area-plan header>div small { margin-top:2px; color:var(--muted); font-size:9px; }
.weekly-area-plan header>label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:9px; }
.weekly-area-plan header input { width:65px; min-width:0; }
.weekly-area-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.weekly-area-groups label { display:flex; align-items:center; gap:7px; min-width:0; padding:7px; border:1px solid var(--line); border-radius:0; background:rgba(255,255,255,.02); cursor:pointer; }
.weekly-area-groups label:has(input:checked) { border-color:color-mix(in srgb,var(--crew) 55%,var(--line)); background:color-mix(in srgb,var(--crew) 10%,transparent); }
.weekly-area-groups span { min-width:0; }
.weekly-area-groups span strong,.weekly-area-groups span small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.weekly-area-groups span strong { font-size:10px; }.weekly-area-groups span small { margin-top:2px; color:var(--muted); font-size:8px; }
@media(max-width:980px){.weekly-area-plan-grid{grid-template-columns:1fr}}@media(max-width:600px){.weekly-area-groups{grid-template-columns:1fr}}
.work-group-create-grid { display:grid !important; grid-template-columns:repeat(4,minmax(150px,1fr)) auto; align-items:start; gap:9px !important; }
.work-group-create-grid label { min-width:0; }
.work-group-create-grid input,.work-group-create-grid select { width:100%; min-width:0; }
.work-group-create-grid > .primary-action { align-self:start; margin-top:16px; }
.work-group-reconciliation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0 10px; }
.work-group-capacity-note { margin:14px 0 -6px; color:var(--muted); font-size:10px; line-height:1.4; }
.work-group-reconciliation article { padding:11px 12px; border:1px solid var(--line); border-radius:0; background:rgba(255,255,255,.025); }
.work-group-reconciliation span,.work-group-reconciliation strong,.work-group-reconciliation small { display:block; }
.work-group-reconciliation span { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.work-group-reconciliation strong { margin:5px 0 3px; font-size:20px; }
.work-group-reconciliation small { color:var(--muted); font-size:9px; }
.work-group-reconciliation .balanced { border-color:rgba(92,108,150,.4); background:rgba(92,108,150,.07); }
.work-group-reconciliation .balanced strong { color:#C3BFB1; }
.work-group-reconciliation .unbalanced { border-color:rgba(189,163,111,.42); background:rgba(189,163,111,.07); }
.work-group-reconciliation .unbalanced strong { color:#B99B57; }
.work-group-summary-table { margin-top:0; border:1px solid var(--line); border-radius:0; }
.work-group-summary-table .wf-table { min-width:980px; }
.work-group-summary-table tfoot td { border-top:1px solid var(--line); background:rgba(92,108,150,.06); }
@media(max-width:1200px){.work-group-create-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}.work-group-create-grid button{min-height:38px}}@media(max-width:760px){.work-group-create-grid{grid-template-columns:1fr}.work-group-create-grid > .primary-action{margin-top:0}.work-group-reconciliation{grid-template-columns:1fr}}
.weekly-staffing-register { border-color:rgba(92,108,150,.3); background:linear-gradient(145deg,rgba(92,108,150,.07),rgba(92,108,150,.025)); }
.weekly-staffing-register>.module-header { align-items:flex-end; margin-bottom:10px; }
.weekly-workforce-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 10px; }
.weekly-workforce-summary article { padding:11px 12px; border:1px solid var(--line); border-radius:0; background:rgba(255,255,255,.025); }
.weekly-workforce-summary span,.weekly-workforce-summary strong,.weekly-workforce-summary small { display:block; }
.weekly-workforce-summary span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.weekly-workforce-summary strong { margin:5px 0 3px; font-size:22px; }
.weekly-workforce-summary small { color:var(--muted); font-size:9px; line-height:1.35; }
.weekly-workforce-summary .actual,.weekly-workforce-summary .balanced { border-color:rgba(92,108,150,.4); background:rgba(92,108,150,.07); }
.weekly-workforce-summary .actual strong,.weekly-workforce-summary .balanced strong { color:#C3BFB1; }
.weekly-workforce-summary .unbalanced { border-color:rgba(189,163,111,.42); background:rgba(189,163,111,.07); }
.weekly-workforce-summary .unbalanced strong { color:#B99B57; }
.workforce-weekly-history .wf-table { min-width:880px; }
.staffing-history-table { min-width:1120px; }
.staffing-history-table input { width:100%; min-width:72px; min-height:36px; padding:7px 9px; border:1px solid var(--line); border-radius:0; background:rgba(8,12,22,.38); color:var(--text); }
.staffing-history-table input[type="number"] { max-width:96px; }
.staffing-history-table input:disabled { opacity:.72; border-color:transparent; background:transparent; }
.staffing-variance { font-weight:700; }.staffing-variance.positive{color:#C3BFB1}.staffing-variance.negative{color:#A8615C}
.staffing-status { display:inline-flex; padding:3px 8px; border-radius:0; border:1px solid var(--line); color:var(--muted); font-size:9px; font-weight:700; white-space:nowrap; }
.staffing-status.planned { color:#B99B57; border-color:rgba(189,163,111,.4); background:rgba(189,163,111,.08); }
.staffing-status.done { color:#C3BFB1; border-color:rgba(92,108,150,.4); background:rgba(92,108,150,.08); }
.contractor-comparison { margin-top:14px; }
.contractor-comparison .wf-table { min-width:1050px; }
.workforce-workflow-guide { display:flex; align-items:flex-start; gap:18px; margin:12px 16px; padding:13px 15px; border:1px solid rgba(92,108,150,.3); border-radius:0; background:rgba(92,108,150,.065); }
.workforce-workflow-guide>strong { flex:0 0 auto; color:var(--aryvor-secondary); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.workforce-workflow-guide ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding-left:22px; color:var(--muted); font-size:10px; line-height:1.45; }
.workforce-workflow-guide li::marker { color:var(--aryvor-secondary); font-weight:800; }
.workforce-section-title { display:flex; align-items:flex-start; gap:10px; }
.workforce-section-title>span { display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; border:1px solid rgba(92,108,150,.4); border-radius:0; background:rgba(92,108,150,.12); color:var(--aryvor-secondary); font-size:11px; font-weight:850; }
.workforce-section-title h4 { margin:0 0 3px; }
.workforce-section-title small { display:block; color:var(--muted); font-size:10px; line-height:1.4; }
.staffing-mode-explanation { display:flex; align-items:center; gap:12px; margin:0 0 10px; padding:9px 11px; border:1px solid var(--line); border-radius:0; background:rgba(255,255,255,.025); }
.staffing-mode-explanation span { flex:0 0 auto; padding:4px 7px; border-radius:0; background:rgba(92,108,150,.12); color:var(--aryvor-secondary); font-size:8px; font-weight:850; letter-spacing:.06em; }
.staffing-mode-explanation p { margin:0; color:var(--muted); font-size:10px; line-height:1.4; }
.work-group-row-actions { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.duplicate-work-group-form { min-width:min(430px,72vw); }
.duplicate-work-group-source { display:grid; gap:3px; padding:12px 13px; border:1px solid rgba(92,108,150,.3); border-radius:0; background:rgba(92,108,150,.07); }
.duplicate-work-group-source span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.duplicate-work-group-source strong { font-size:13px; }.duplicate-work-group-source small { color:var(--muted); font-size:10px; }
.duplicate-work-group-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.weekly-planning-date input { min-height:36px; padding:7px 9px; border-radius:0; }
@media(max-width:900px){.workforce-workflow-guide{display:block}.workforce-workflow-guide ol{grid-template-columns:1fr;margin-top:9px}}
@media(max-width:900px){.weekly-workforce-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.predictive-pace-table { min-width:1380px; }
.material-coverage { display:inline-flex; align-items:center; justify-content:center; min-width:48px; padding:3px 8px; border:1px solid var(--line); border-radius:0; font-size:10px; font-weight:800; }
.material-coverage.good { color:#C3BFB1; border-color:rgba(92,108,150,.42); background:rgba(92,108,150,.08); }
.material-coverage.risk { color:#A8615C; border-color:rgba(168,97,92,.48); background:rgba(168,97,92,.1); }
/* Simplified project chrome: only navigation resize remains in the rail. */
.rail {
justify-content:flex-start;
gap:14px !important;
}
.rail .sidebar-toggle {
margin-top:2px;
border:1px solid var(--aryvor-border) !important;
background:transparent !important;
color:#8496C2 !important;
box-shadow:none !important;
}
.rail .sidebar-toggle:hover {
border-color:rgba(92,108,150,.55) !important;
background:rgba(92,108,150,.08) !important;
color:var(--aryvor-secondary) !important;
}
.panel-toolbar,.role-state-controls { display:none !important; }
.top-actions { gap:9px; }
.top-role {
display:flex;
align-items:center;
min-height:34px;
max-width:230px;
padding:0 11px;
border:1px solid var(--aryvor-border);
border-radius:0;
background:rgba(255,255,255,.018);
color:#C3BFB1;
}
.top-role-label {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:10px;
letter-spacing:.035em;
}
.top-role .chip { margin-left:7px; white-space:nowrap; }
.module-header-meta {
max-width:min(44vw,420px);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#A3A29B;
font-size:10px;
letter-spacing:.055em;
text-transform:uppercase;
}
/* Permission matrix: readable columns with wrapping, contained by one scroll area. */
.perm-matrix {
width:100% !important;
min-width:1120px;
table-layout:fixed;
}
.perm-matrix th:first-child,.perm-matrix td:first-child { width:180px; }
.perm-col-hd {
width:134px;
min-width:134px;
white-space:normal;
overflow-wrap:anywhere;
line-height:1.35;
}
.perm-view-label {
white-space:normal;
overflow-wrap:anywhere;
line-height:1.35;
}
.perm-read { color:#B99B57 !important; }
.perm-write { color:#6E8F6B !important; }
/* Import cards share equal rows and their actions never escape the card. */
.import-grid {
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important;
align-items:stretch;
}
.import-card-v2 {
min-width:0;
min-height:168px;
display:grid !important;
grid-template-rows:auto minmax(40px,1fr) auto;
gap:10px;
overflow:hidden;
}
.import-card-v2>strong,.import-card-v2>small {
min-width:0;
overflow-wrap:anywhere;
word-break:normal;
}
.import-card-v2>small { line-height:1.55; color:#A3A29B; }
.import-card-v2.import-card-focus { outline:2px solid var(--accent); outline-offset:2px; animation:import-card-focus-fade 2.4s ease-out forwards; }
@keyframes import-card-focus-fade { 0%,60%{ outline-color:var(--accent); } 100%{ outline-color:transparent; } }
.import-card-actions {
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:8px;
width:100%;
margin-top:auto;
}
.import-card-actions .filter-btn {
min-width:0;
width:100%;
min-height:36px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
white-space:normal;
}
/* Technical Office hub — scoped so it doesn't bleed into Import center or
other screens that reuse the same .import-card-v2/.energization-register-header
classes. Several theme blocks redefine .filter-btn as a bare underline
(no border/background, !important) for their own aesthetic, which reads as
plain text rather than a clickable button here — force a square outline
back on regardless of which theme block wins. */
.tech-office-page .module-header { margin-bottom:22px; }
.tech-office-page .energization-register-header { margin-top:30px; }
.tech-office-page .energization-register-header:first-of-type { margin-top:22px; }
.tech-office-page .energization-register-header h3 { font-size:15px; font-weight:650; letter-spacing:.02em; display:flex; align-items:center; gap:8px; }
.tech-office-page .import-card-v2 > strong { font-size:14px; display:flex; align-items:center; gap:8px; }
.tech-office-page .import-card-v2 > small { font-size:12px; }
.tech-office-page .tech-office-icon { font-size:16px; line-height:1; }
.tech-office-page .import-card-actions .filter-btn,
.tech-office-page .import-card-actions .primary-action {
border:1px solid var(--line) !important;
border-radius:0 !important;
background:transparent !important;
color:inherit !important;
font-weight:650 !important;
text-decoration:none !important;
transition:background 120ms ease, color 120ms ease;
}
.tech-office-page .import-card-actions .filter-btn:hover,
.tech-office-page .import-card-actions .primary-action:hover {
border-color:var(--accent) !important;
background:var(--accent) !important;
color:var(--muted) !important;
}
/* Supervisor access and area mapping use two explicit visual levels. */
.project-supervisor-roster {
margin:4px 0 18px;
padding:16px;
border:1px solid var(--aryvor-border);
border-radius:0;
background:var(--aryvor-elevated);
}
.project-supervisor-roster .module-hd { margin-bottom:12px; }
.project-supervisor-roster .module-hd strong,.project-supervisor-roster .module-hd small { display:block; }
.project-supervisor-roster .module-hd small { margin-top:4px; color:#A3A29B; line-height:1.45; }
.project-supervisor-options {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:8px;
}
.project-supervisor-option {
min-width:0;
display:flex;
align-items:center;
gap:10px;
padding:10px 11px;
border:1px solid var(--aryvor-border);
border-radius:0;
background:#141413;
cursor:pointer;
}
.project-supervisor-option:has(input:checked) {
border-color:rgba(92,108,150,.48);
background:rgba(92,108,150,.08);
}
.project-supervisor-option span,.project-supervisor-option strong,.project-supervisor-option small { min-width:0; display:block; }
.project-supervisor-option strong,.project-supervisor-option small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-supervisor-option small { margin-top:3px; color:#A3A29B; font-size:10px; }
.supervisor-matrix-intro { margin:0 0 10px; }
.supervisor-matrix-intro strong,.supervisor-matrix-intro p { display:block; margin:0; }
.supervisor-matrix-intro p { margin-top:4px; color:#A3A29B; font-size:11.5px; }
.supervisor-empty-state,.empty-inline {
margin:0;
padding:20px;
border:1px dashed var(--aryvor-border);
border-radius:0;
color:#A3A29B;
text-align:center;
}
@media (max-width:900px) {
.top-role { max-width:160px; }
.import-grid { grid-template-columns:1fr !important; }
}
/* Tables stay on the canvas and never switch to light mode. */
.workflow-table,table { background:transparent; color:#C3BFB1; }
.workflow-table thead th,table thead th { background:#141413 !important; color:#A3A29B !important; }
.workflow-table td,table td { border-color:rgba(92,108,150,.62) !important; }
.workflow-table tbody tr:hover>td,table tbody tr:hover>td { filter:brightness(1.08); }
.workflow-table th:first-child,.workflow-table td:first-child { background:inherit !important; }
.column-filter-btn { background:#1C1C1A !important; color:#8496C2 !important; }
/* Shared table filters: keep every column popover inside the Aryvor dark theme. */
.column-filter-menu {
z-index:120 !important;
border:1px solid #3E3E39 !important;
border-radius:0;
background:#1C1C1A !important;
color:#f1f0f5 !important;
box-shadow:none;
color-scheme:dark;
}
.column-filter-menu .filter-check {
border-radius:0;
color:#E3E0D5 !important;
cursor:pointer;
}
.column-filter-search {
display:block;
margin:0 0 9px;
}
.column-filter-search input[type="search"] {
width:100%;
min-height:34px;
padding:7px 10px 7px 30px !important;
border:1px solid #3E3E39 !important;
border-radius:0;
background:#0D0D0C
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b9dac' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")
no-repeat 10px center !important;
color:#f2f1f6 !important;
font-size:12px;
outline:none;
}
.column-filter-search input[type="search"]::placeholder { color:#A3A29B !important; opacity:1; }
.column-filter-search input[type="search"]:focus {
border-color:#5C6C96 !important;
box-shadow:none;
}
.column-filter-values .filter-check[hidden] { display:none !important; }
.column-filter-menu .filter-check:hover {
background:rgba(92,108,150,.12) !important;
color:#fff !important;
}
.column-filter-menu .filter-check span {
min-width:0;
overflow:hidden;
color:inherit !important;
text-overflow:ellipsis;
white-space:nowrap;
}
.column-filter-menu .filter-all {
color:#f3f2f7 !important;
font-weight:750;
}
.column-filter-menu .column-filter-values {
border-top-color:#3E3E39 !important;
scrollbar-color:#6E6D66 #1C1C1A;
scrollbar-width:thin;
}
.column-filter-menu .column-filter-values::-webkit-scrollbar { width:8px; }
.column-filter-menu .column-filter-values::-webkit-scrollbar-track { background:#1C1C1A; }
.column-filter-menu .column-filter-values::-webkit-scrollbar-thumb {
border:2px solid #1C1C1A;
border-radius:0;
background:#6E6D66;
}
.column-filter-menu input[type="checkbox"] {
width:15px !important;
height:15px !important;
margin:0 !important;
padding:0 !important;
border:1px solid #6E6D66 !important;
border-radius:0;
background:#0D0D0C !important;
accent-color:#5C6C96;
cursor:pointer;
}
.column-filter-menu input[type="checkbox"]:focus-visible {
outline:2px solid #8496C2;
outline-offset:2px;
}
/* Remove leftover high-saturation accents outside semantic states. */
.notify::after,.tab-btn.active::after { background:var(--aryvor-primary) !important; }
.gantt-today-line { background:var(--aryvor-danger) !important; }
.gantt-today-badge,.ig-today-badge { background:rgba(168,97,92,.16) !important; color:#A8615C !important; }
/* Reports: contained, dark and consistent with the Aryvor visual system. */
.hero-controls[hidden] { display:none !important; }
body[data-view="reports"] .rpt-doc,
body[data-view="exports"] .rpt-doc {
width:100%;
min-width:0;
overflow-x:hidden;
color:var(--aryvor-text);
}
body[data-view="exports"] .rpt-doc {
overflow-y:auto;
max-height:calc(100vh - 260px);
padding-right:8px;
}
body[data-view="reports"] .rpt-section,
body[data-view="exports"] .rpt-section,
body[data-view="reports"] .rpt-two-col,
body[data-view="exports"] .rpt-two-col {
min-width:0;
border-color:var(--aryvor-border) !important;
}
.rpt-tabs { border-color:var(--aryvor-border) !important; }
.rpt-tab,.rpt-nav-btn,.rpt-print-btn {
border:1px solid var(--aryvor-border) !important;
border-radius:0;
background:var(--aryvor-surface) !important;
color:#C3BFB1 !important;
box-shadow:none !important;
}
.rpt-tab.active {
border-color:rgba(92,108,150,.55) !important;
background:rgba(92,108,150,.13) !important;
color:var(--aryvor-secondary) !important;
}
.rpt-nav-btn:hover,.rpt-print-btn:hover,.rpt-tab:hover {
border-color:rgba(92,108,150,.5) !important;
background:rgba(92,108,150,.08) !important;
}
.rpt-date-label strong,.rpt-section-title,.rpt-cust-title,.rpt-act-label { color:var(--aryvor-text) !important; }
.rpt-date-label small,.rpt-cust-sub { color:#A3A29B !important; opacity:1 !important; }
.rpt-section-num { color:rgba(92,108,150,.16) !important; }
.rpt-cust-header {
border-color:var(--aryvor-border) !important;
background:var(--aryvor-elevated) !important;
}
.rpt-table-wrap {
min-width:0;
overflow:hidden !important;
border:1px solid var(--aryvor-border) !important;
border-radius:0;
box-shadow:none !important;
}
.rpt-table {
width:100%;
min-width:0;
table-layout:fixed;
}
.rpt-table thead,.rpt-table th { background:#141413 !important; }
.rpt-table th,.rpt-table td {
min-width:0;
padding:9px 10px;
border-color:rgba(92,108,150,.62) !important;
color:#C3BFB1 !important;
white-space:normal;
overflow-wrap:anywhere;
line-height:1.35;
}
.rpt-table tbody tr:hover>td { background:rgba(92,108,150,.045) !important; }
.rpt-kpi,.rpt-wf-row {
border:1px solid var(--aryvor-border) !important;
border-radius:0;
background:var(--aryvor-surface) !important;
box-shadow:none !important;
}
.rpt-kpi strong { color:var(--aryvor-text) !important; }
.rpt-kpi span { color:#A3A29B !important; opacity:1 !important; }
.rpt-kpi-ok { background:rgba(92,108,150,.08) !important; border-color:rgba(92,108,150,.34) !important; }
.rpt-kpi-ok strong { color:#C3BFB1 !important; }
.rpt-kpi-warn { background:rgba(189,163,111,.08) !important; border-color:rgba(189,163,111,.34) !important; }
.rpt-kpi-warn strong { color:#B99B57 !important; }
.rpt-kpi-critical { background:rgba(168,97,92,.09) !important; border-color:rgba(168,97,92,.36) !important; }
.rpt-kpi-critical strong { color:#A8615C !important; }
.rpt-status-ok { background:rgba(92,108,150,.12) !important; color:#C3BFB1 !important; }
.rpt-status-progress { background:rgba(189,163,111,.12) !important; color:#B99B57 !important; }
.rpt-status-open { background:rgba(92,108,150,.09) !important; color:#8496C2 !important; opacity:1 !important; }
.rpt-status-critical { background:rgba(168,97,92,.13) !important; color:#A8615C !important; }
.rpt-act-bar-wrap { background:#1C1C1A !important; border-color:var(--aryvor-border) !important; }
.rpt-notes { border:1px solid var(--aryvor-border) !important; background:var(--aryvor-surface) !important; color:var(--aryvor-text) !important; }
/* Materials fit their workspace; labels wrap instead of being clipped. */
body[data-view="materials"] .mat-table-wrap { overflow:auto; }
body[data-view="materials"] .mat-table { width:100%; min-width:1440px; table-layout:fixed; }
body[data-view="materials"] .mat-table col { width:auto; }
body[data-view="materials"] .mat-table-cables col:nth-child(1) { width:9%; }
body[data-view="materials"] .mat-table-cables col:nth-child(2) { width:13%; }
body[data-view="materials"] .mat-table-cables col:nth-child(3) { width:6%; }
body[data-view="materials"] .mat-table-cables col:nth-child(4) { width:5%; }
body[data-view="materials"] .mat-table-cables col:nth-child(5) { width:13%; }
body[data-view="materials"] .mat-table-cables col:nth-child(6) { width:8%; }
body[data-view="materials"] .mat-table-cables col:nth-child(7) { width:8%; }
body[data-view="materials"] .mat-table-cables col:nth-child(8) { width:8%; }
body[data-view="materials"] .mat-table-cables col:nth-child(9) { width:7%; }
body[data-view="materials"] .mat-table-cables col:nth-child(10) { width:8%; }
body[data-view="materials"] .mat-table-cables col:nth-child(11) { width:10%; }
body[data-view="materials"] .mat-table-cables col:nth-child(12) { width:5%; }
body[data-view="materials"] .mat-table-install col:nth-child(1) { width:13%; }
body[data-view="materials"] .mat-table-install col:nth-child(2) { width:18%; }
body[data-view="materials"] .mat-table-install col:nth-child(3) { width:9%; }
body[data-view="materials"] .mat-table-install col:nth-child(4) { width:8%; }
body[data-view="materials"] .mat-table-install col:nth-child(5) { width:13%; }
body[data-view="materials"] .mat-table-install col:nth-child(6) { width:10%; }
body[data-view="materials"] .mat-table-install col:nth-child(7) { width:10%; }
body[data-view="materials"] .mat-table-install col:nth-child(8) { width:10%; }
body[data-view="materials"] .mat-table-install col:nth-child(9) { width:9%; }
body[data-view="materials"] .mat-table th,
body[data-view="materials"] .mat-table td {
min-width:0;
padding:8px 7px;
white-space:normal;
overflow-wrap:anywhere;
line-height:1.35;
}
body[data-view="materials"] .mat-table th {
white-space:nowrap;
overflow-wrap:normal;
word-break:normal;
}
body[data-view="materials"] .mat-table .sort-th-inner { min-width:0; }
body[data-view="materials"] .mat-bar-wrap { width:100%; min-width:36px; }
body[data-view="materials"] .mat-ok { color:#C3BFB1; }
body[data-view="materials"] .mat-warn { color:#B99B57; }
body[data-view="materials"] .mat-critical { color:#A8615C; }
/* Topology health layer: operational state plus quick evidence links. */
.topology-breakdown { overflow-x:hidden; }
.topology-branch { min-width:0; }
.tree-node {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:8px;
min-width:0;
}
.tree-node-select {
display:grid;
grid-template-columns:minmax(140px,1.1fr) minmax(150px,1.25fr) repeat(3,minmax(74px,.55fr)) auto;
align-items:center;
gap:10px;
width:100%;
min-width:0;
padding:0;
border:0;
background:transparent;
color:inherit;
text-align:left;
cursor:pointer;
}
.tree-node-select>span { min-width:0; }
.tree-node-select .cable-link { overflow-wrap:anywhere; }
.topology-health-links {
display:flex;
flex-wrap:wrap;
gap:6px;
padding-top:7px;
border-top:1px solid rgba(92,108,150,.55);
}
.topology-health-btn {
display:inline-flex;
align-items:center;
gap:7px;
min-height:28px;
padding:4px 8px;
border:1px solid var(--aryvor-border);
border-radius:0;
background:#141413;
color:#C3BFB1;
font-size:9px;
cursor:pointer;
}
.topology-health-btn strong { font-size:10px; color:#E3E0D5; }
.topology-health-btn.has-issue { border-color:rgba(168,97,92,.42); background:rgba(168,97,92,.08); }
.topology-health-btn.has-issue strong { color:#A8615C; }
.topology-health-btn.is-clear { border-color:rgba(92,108,150,.36); background:rgba(92,108,150,.07); }
.topology-health-btn.is-clear strong { color:#C3BFB1; }
.topology-health-btn.is-pending { border-color:rgba(189,163,111,.34); background:rgba(189,163,111,.07); }
.topology-health-btn.is-pending strong { color:#B99B57; }
.topology-health-btn:disabled { opacity:.48; cursor:default; }
.topology-modal-list { display:grid; gap:8px; max-height:58vh; overflow-y:auto; }
.topology-modal-card,.topology-qc-summary {
padding:12px;
border:1px solid var(--aryvor-border);
border-radius:0;
background:var(--aryvor-surface);
}
.topology-modal-card>div,.topology-qc-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.topology-modal-card h4 { margin:10px 0 5px; }
.topology-modal-card p { margin:0 0 8px; color:#C3BFB1; line-height:1.5; }
.topology-modal-card small,.topology-qc-summary small { color:#A3A29B; }
.topology-modal-card.has-issue { border-color:rgba(168,97,92,.38); }
@media (max-width:1200px) {
.rpt-two-col { grid-template-columns:1fr; gap:18px; }
.tree-node-select { grid-template-columns:minmax(130px,1fr) minmax(145px,1fr) repeat(3,70px); }
.tree-node-select .child-count { display:none; }
}
/* Final control-plan layout overrides. */
body[data-view="templates"] #primaryModule > .module-header {
top: -22px;
z-index: 25;
margin: -10px -12px 15px;
padding: 10px 12px 11px;
border-bottom: 1px solid var(--aryvor-border);
background: var(--aryvor-canvas) !important;
box-shadow:none;
}
/* Control-plan modal checkboxes: fixed, legible controls instead of form-width inputs. */
.quality-form .quality-checkboxes input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
flex: 0 0 18px;
margin: 0;
padding: 0;
border: 1px solid #6E6D66 !important;
border-radius:0;
background: #0D0D0C !important;
display: grid;
place-content: center;
cursor: pointer;
}
.quality-form .quality-checkboxes input[type="checkbox"]::after {
content: "";
width: 8px;
height: 4px;
border-left: 2px solid #0D0D0C;
border-bottom: 2px solid #0D0D0C;
transform: rotate(-45deg) scale(0);
transform-origin: center;
transition: transform .12s ease;
}
.quality-form .quality-checkboxes input[type="checkbox"]:checked {
border-color: var(--aryvor-primary) !important;
background: var(--aryvor-primary) !important;
}
.quality-form .quality-checkboxes input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
.quality-form .quality-checkboxes label { display:flex; align-items:center; gap:8px; min-width:0; }
.quality-type-field .quality-checkboxes {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px 18px;
}
.quality-requirements { align-items:center; gap:28px; }
.quality-requirements label { white-space:nowrap; }
@media(max-width:620px){.quality-type-field .quality-checkboxes{grid-template-columns:repeat(2,minmax(0,1fr))}.quality-requirements{align-items:flex-start;flex-direction:column;gap:12px}}
body[data-view="templates"] .quality-plan-list { grid-template-columns:minmax(0,1fr)!important; background:transparent!important; min-width:0; }
body[data-view="templates"] .quality-plan-card { min-width:0; overflow:hidden; border-radius:0; }
body[data-view="templates"] .quality-plan-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:start; }
body[data-view="templates"] .quality-plan-head>div:first-child { min-width:0; }
body[data-view="templates"] .quality-plan-tools { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; max-width:480px; }
.quality-step-list { display:grid; gap:7px; padding:0 16px 16px; min-width:0; }
.quality-step-card { display:grid; grid-template-columns:44px minmax(220px,1fr) minmax(120px,.26fr) minmax(180px,.42fr) auto; gap:14px; align-items:center; min-width:0; padding:13px 14px; border:1px solid var(--aryvor-border); border-radius:0; background:rgba(15,17,28,.38); }
.quality-step-order { display:grid; place-items:center; width:34px; height:34px; border-radius:0; color:#8496C2; background:rgba(92,108,150,.16); font-size:12px; font-weight:700; }
.quality-step-copy,.quality-step-owner { min-width:0; display:grid; gap:4px; }
.quality-step-copy strong,.quality-step-copy span,.quality-plan-head h3,.quality-plan-head p { overflow-wrap:anywhere; }
.quality-step-copy strong { color:var(--text); font-size:13px; line-height:1.4; }
.quality-step-copy span { color:var(--muted); font-size:12px; line-height:1.45; }
.quality-step-owner small { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.quality-step-owner strong { font-size:12px; }
.quality-step-evidence { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.qc-findings-row { display:block!important; grid-column:1/-1!important; width:100%!important; min-width:0; box-sizing:border-box; }
.qc-findings-row #qcFindings { display:block; width:100%!important; min-width:100%; box-sizing:border-box; }
.instruments-table { overflow-x:hidden; }
.instruments-table .ops-table { width:100%; min-width:0; table-layout:fixed; }
.instruments-table th,.instruments-table td { white-space:normal; overflow-wrap:anywhere; }
@media(max-width:1050px){.quality-step-card{grid-template-columns:40px minmax(0,1fr) auto}.quality-step-owner,.quality-step-evidence{grid-column:2}.quality-step-card>.quality-actions{grid-column:3;grid-row:1/span 3}}
@media(max-width:760px){body[data-view="templates"] .quality-plan-head{grid-template-columns:1fr}body[data-view="templates"] .quality-plan-tools{justify-content:flex-start;max-width:none}.quality-step-card{grid-template-columns:34px minmax(0,1fr);gap:10px}.quality-step-owner,.quality-step-evidence,.quality-step-card>.quality-actions{grid-column:2;grid-row:auto}}
/* Shared right drawer — one solid surface for planning, details, assignments and punch list. */
.split-view:not(.drawer-open) > #sideModule:not(:empty) {
border: 1px solid var(--aryvor-border) !important;
border-radius:0;
background: #141413 !important;
color: var(--aryvor-text);
}
.right-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 65;
border: 0;
border-radius:0;
background: rgba(8, 9, 16, .62);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
cursor: default;
}
.split-view.drawer-open #sideModule {
display: block;
position: fixed;
z-index: 70;
top: 92px;
right: 24px;
bottom: 24px;
width: min(420px, calc(100vw - 48px));
min-width: 0;
padding: 22px;
overflow-y: auto;
border: 1px solid var(--aryvor-border-strong) !important;
border-radius:0;
background: #141413 !important;
color: var(--aryvor-text);
box-shadow:none;
opacity: 1 !important;
transform: translateX(0);
pointer-events: auto;
isolation: isolate;
backdrop-filter: none;
}
.split-view.drawer-open #sideModule .assignment-drawer-head,
.split-view.drawer-open #sideModule .punch-drawer-head {
position: sticky;
top: -22px;
z-index: 3;
min-height: 64px;
margin: -22px -22px 18px;
padding: 15px 22px 13px;
border-bottom: 1px solid var(--aryvor-border);
background: #141413;
}
.split-view.drawer-open #sideModule .assignment-drawer-head .module-header {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: start;
gap: 3px;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.split-view.drawer-open #sideModule .assignment-drawer-head .module-header-meta {
max-width: none;
overflow: visible;
white-space: normal;
text-overflow: clip;
line-height: 1.35;
}
.split-view.drawer-open #sideModule .assignment-drawer-head .module-header h2,
.split-view.drawer-open #sideModule .punch-drawer-head strong {
color: #f1f0f5;
font-size: 15px;
line-height: 1.35;
}
.split-view.drawer-open #sideModule .assignment-panel,
.split-view.drawer-open #sideModule .detail-panel {
gap: 14px;
}
.split-view.drawer-open #sideModule .assignment-panel input,
.split-view.drawer-open #sideModule .assignment-panel select,
.split-view.drawer-open #sideModule .assignment-panel textarea,
.split-view.drawer-open #sideModule .detail-panel input,
.split-view.drawer-open #sideModule .detail-panel select,
.split-view.drawer-open #sideModule .detail-panel textarea {
border-color: var(--aryvor-border) !important;
background: #1C1C1A !important;
color: var(--aryvor-text) !important;
}
.split-view.drawer-open #sideModule .task-assignment-fieldset,
.split-view.drawer-open #sideModule .crew-summary > div,
.split-view.drawer-open #sideModule .detail-meta span,
.split-view.drawer-open #sideModule .punch-meta-grid > div,
.split-view.drawer-open #sideModule .punch-field-block {
border: 1px solid var(--aryvor-border) !important;
border-radius:0;
background: #1C1C1A !important;
}
.split-view.drawer-open #sideModule .crew-summary > div,
.split-view.drawer-open #sideModule .detail-meta span,
.split-view.drawer-open #sideModule .punch-meta-grid > div,
.split-view.drawer-open #sideModule .punch-field-block {
padding: 10px 12px;
}
.split-view.drawer-open #sideModule .punch-drawer {
height: auto;
padding: 0;
overflow: visible;
}
.split-view.drawer-open #sideModule .punch-drawer-title {
color: var(--aryvor-text);
font-size: 16px;
}
.split-view.drawer-open #sideModule .punch-meta-grid {
gap: 8px;
}
.split-view.drawer-open #sideModule .punch-meta-grid span,
.split-view.drawer-open #sideModule .punch-field-block p {
color: #d7d7de;
}
.split-view.drawer-open #sideModule .icon-btn {
flex: 0 0 34px;
width: 34px;
height: 34px;
border: 1px solid var(--aryvor-border) !important;
border-radius:0;
background: #1C1C1A !important;
color: #C3BFB1 !important;
}
/* Planning detail drawer. */
body[data-view="progress"] .gantt-layout.drawer-open #sideModule {
width: min(420px, calc(100vw - 48px));
}
body[data-view="progress"] .gantt-detail-header {
position: sticky;
top: -22px;
z-index: 2;
min-height: 68px;
margin: -22px -22px 18px;
padding: 17px 22px 14px;
border-bottom: 1px solid var(--aryvor-border);
background: #141413;
}
body[data-view="progress"] .gantt-detail-header strong {
color: #f1f0f5;
font-size: 15px;
line-height: 1.3;
}
body[data-view="progress"] .gantt-detail-header small {
margin-top: 3px;
color: #A3A29B;
font-size: 11px;
}
body[data-view="progress"] .gantt-detail-close {
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin-left: auto;
flex: 0 0 34px;
border: 1px solid var(--aryvor-border);
border-radius:0;
background: #1C1C1A;
color: #C3BFB1;
font-size: 14px;
cursor: pointer;
}
body[data-view="progress"] .gantt-detail-close:hover {
border-color: rgba(92,108,150, .65);
color: var(--aryvor-secondary);
}
body[data-view="progress"] .gantt-detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 18px;
}
body[data-view="progress"] .gantt-detail-card {
min-width: 0;
min-height: 82px;
padding: 13px;
border: 1px solid var(--aryvor-border);
border-radius:0;
background: #1C1C1A;
}
body[data-view="progress"] .gantt-detail-card span {
color: #A3A29B;
font-size: 10px;
line-height: 1.3;
}
body[data-view="progress"] .gantt-detail-card strong {
display: block;
color: #E3E0D5;
font-size: 15px;
line-height: 1.35;
overflow-wrap: anywhere;
}
body[data-view="progress"] .gantt-detail-bar-bg {
height: 11px;
border: 1px solid var(--aryvor-border);
background: #1C1C1A;
}
body[data-view="progress"] .gantt-detail-action {
width: 100%;
min-height: 42px;
margin-top: 13px;
justify-content: center;
}
@media (max-width: 760px) {
.split-view.drawer-open #sideModule,
body[data-view="progress"] .gantt-layout.drawer-open #sideModule {
top: 68px;
right: 10px;
bottom: 10px;
width: calc(100vw - 20px);
padding: 18px;
}
body[data-view="progress"] .gantt-detail-header {
top: -18px;
margin: -18px -18px 16px;
padding-inline: 18px;
}
}
/* Large registers: keep DOM size bounded while preserving access to every row. */
.table-pagination {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
min-height:52px;
padding:10px 12px;
border-top:1px solid var(--aryvor-border);
color:#A3A29B;
font-size:11px;
}
.table-pagination>div { display:flex; align-items:center; gap:5px; }
.table-page-number,.table-page-nav {
display:grid;
place-items:center;
min-width:32px;
height:32px;
padding:0 8px;
border:1px solid var(--aryvor-border);
border-radius:0;
background:#141413;
color:#C3BFB1;
cursor:pointer;
}
.table-page-number:hover,.table-page-nav:hover:not(:disabled) { border-color:#5C6C96; color:#F7F6F1; }
.table-page-number.active { border-color:#5C6C96; background:rgba(92,108,150,.18); color:#8496C2; }
.table-page-nav:disabled { opacity:.35; cursor:default; }
@media (max-width:640px) {
.table-pagination { align-items:flex-start; flex-direction:column; }
}
/* ========================================================================== */
/* Aryvor V4.3 — complete dual-theme layer */
/* ========================================================================== */
.theme-toggle {
display:grid;
place-items:center;
flex:0 0 40px;
width:40px;
height:40px;
padding:0;
border:1px solid var(--aryvor-border);
border-radius:0;
background:var(--aryvor-elevated);
color:var(--aryvor-secondary);
cursor:pointer;
transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.theme-toggle:hover { border-color:var(--aryvor-primary); transform:translateY(-1px); }
.theme-icon { position:relative; width:17px; height:17px; border:2px solid currentColor; border-radius:0; }
.theme-icon::before {
content:"";
position:absolute;
inset:-5px;
background:repeating-conic-gradient(currentColor 0 7deg,transparent 7deg 45deg);
-webkit-mask:radial-gradient(circle,transparent 0 8px,#000 8.5px);
mask:radial-gradient(circle,transparent 0 8px,#000 8.5px);
}
html[data-theme="light"] .theme-icon { overflow:hidden; background:var(--aryvor-primary); }
html[data-theme="light"] .theme-icon::after {
content:"";
position:absolute;
top:-3px;
left:5px;
width:15px;
height:15px;
border-radius:0;
background:var(--aryvor-elevated);
}
html[data-theme="light"] .theme-icon::before { display:none; }
html[data-theme="light"] {
--aryvor-bg:#edeef2;
--aryvor-canvas:#edeef2;
--aryvor-elevated:#edeef2;
--aryvor-surface:#edeef2;
--aryvor-border:transparent;
--aryvor-border-strong:rgba(186,188,201,0.25);
--aryvor-primary:#5C6C96;
--aryvor-secondary:#5C6C96;
--aryvor-text:#1C1C1A;
--aryvor-muted:#6E6D66;
--atlas-bg:var(--aryvor-bg);
--atlas-canvas:var(--aryvor-bg);
--atlas-panel:var(--aryvor-surface);
--atlas-text:var(--aryvor-text);
--atlas-muted:var(--aryvor-muted);
--line:transparent;
--ink:var(--aryvor-text);
--text:var(--aryvor-text);
--muted:var(--aryvor-muted);
--bg:var(--aryvor-bg);
--surface:var(--aryvor-bg);
--surface-2:var(--aryvor-bg);
--soft:var(--aryvor-bg);
--hot-soft:#f7e9cf;
--panel:var(--aryvor-bg);
--border:transparent;
--shadow:none;
color-scheme:light;
}
html[data-theme="light"] body,
html[data-theme="light"] .workspace,
html[data-theme="light"] .topbar,
html[data-theme="light"] .login-overlay,
html[data-theme="light"] .commessa-overlay,
html[data-theme="light"] .cadm-overlay { background:var(--aryvor-bg)!important; color:var(--aryvor-text); }
html[data-theme="light"] .rail { background:#F7F6F1; }
html[data-theme="light"] .sidebar { background:#E3E0D5; }
html[data-theme="light"] .tree a { color:#6E6D66; }
html[data-theme="light"] .tree a:hover { background:rgba(92,108,150,.07); color:var(--aryvor-text); }
html[data-theme="light"] .tree a .nav-svg { color:#6E6D66; }
html[data-theme="light"] .tree p { color:#A3A29B; }
html[data-theme="light"] .tree p button { color:#6E6D66; }
html[data-theme="light"] .tree a.selected { background:linear-gradient(90deg,rgba(92,108,150,.14),transparent)!important; }
html[data-theme="light"] .search,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .mini-input,
html[data-theme="light"] .mini-select,
html[data-theme="light"] .settings-select,
html[data-theme="light"] .cadm-input {
border-color:var(--aryvor-border)!important;
background:#fff!important;
color:var(--aryvor-text)!important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color:#A3A29B; opacity:1; }
html[data-theme="light"] input:disabled,
html[data-theme="light"] select:disabled,
html[data-theme="light"] textarea:disabled { background:#ebeaf0!important; color:#A3A29B!important; }
html[data-theme="light"] .rail-btn,
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .round,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .avatar { background:#fff!important; color:#5C6C96!important; box-shadow:none; }
html[data-theme="light"] .module,
html[data-theme="light"] .module.accent,
html[data-theme="light"] .cadm-card { background:transparent!important; }
html[data-theme="light"] :is(.predictive-card,.predictive-kpis article,.quality-plan-card,.area-plant-card,.import-card,.report-card,.code-card,.filter-result,.list-row,.empty-state,.wq-proposal-panel,.wq-proposal-card,.readonly-banner,.qc-workspace-intro,.selection-action-bar,.table-wrap,.quality-table-wrap,.login-card,.cadm-dialog,.modal,.sidebar-card,.commessa-view-toggle,.commessa-card,.commessa-list-row,.settings-modal,.topology-modal-card,.punch-field-block) {
border-color:var(--aryvor-border)!important;
background:var(--aryvor-elevated)!important;
color:var(--aryvor-text)!important;
box-shadow:none!important;
}
html[data-theme="light"] :is(.quality-plan-head,.area-plant-card>header,.import-toolbar,.cadm-header,.cadm-footer,.modal-head,.user-table-columns-footer) {
border-color:var(--aryvor-border)!important;
background:#F7F6F1!important;
}
html[data-theme="light"] .modal::backdrop { background:rgba(39,35,54,.28); }
html[data-theme="light"] .modal,
html[data-theme="light"] .cadm-dialog { color:var(--aryvor-text); }
html[data-theme="light"] :is(h1,h2,h3,h4,h5,h6,strong,.module-header h2,.modal-head h2,.cadm-header h2) { color:var(--aryvor-text); }
html[data-theme="light"] :is(p,small,.module-subtitle,.module-header-meta,.cav-user-info small,.detail-panel label,.assignment-panel label) { color:var(--aryvor-muted); }
html[data-theme="light"] table,
html[data-theme="light"] .workflow-table { color:var(--aryvor-text); background:transparent; }
html[data-theme="light"] .workflow-table thead th,
html[data-theme="light"] table thead th { border-color:var(--aryvor-border); background:#eeedf5!important; color:#6E6D66!important; }
html[data-theme="light"] table td,
html[data-theme="light"] .workflow-table td { border-color:#e3e1e9; }
html[data-theme="light"] .workflow-table tbody tr:hover,
html[data-theme="light"] table tbody tr:hover { background:rgba(92,108,150,.055)!important; }
html[data-theme="light"] .ops-table tr.progress-row-ready>td,
html[data-theme="light"] .equipment-row.eq-row-ready>td { background:rgba(92,108,150,.075)!important; }
html[data-theme="light"] .ops-table tr.progress-row-assigned>td,
html[data-theme="light"] .equipment-row.eq-row-assigned>td { background:rgba(92,108,150,.085)!important; }
html[data-theme="light"] .ops-table tr.progress-row-active>td { background:rgba(161,125,52,.09)!important; }
html[data-theme="light"] .ops-table tr.progress-row-done>td,
html[data-theme="light"] .equipment-row.eq-row-done>td { background:rgba(92,108,150,.09)!important; }
html[data-theme="light"] .ops-table tr.progress-row-blocked>td { background:rgba(168,97,92,.09)!important; }
html[data-theme="light"] .ops-table tr[class*="progress-row"]>td strong,
html[data-theme="light"] .equipment-row[class*="eq-row"]>td strong { color:var(--aryvor-text)!important; }
html[data-theme="light"] .ops-table tr[class*="progress-row"]>td small,
html[data-theme="light"] .equipment-row[class*="eq-row"]>td small { color:var(--aryvor-muted)!important; }
html[data-theme="light"] :is(.filter-btn,.cadm-btn-secondary,.column-filter-btn,.icon-action,.annex-upload-label,.table-page-number,.table-page-nav,.commessa-toggle-btn,.cav-item) {
border-color:var(--aryvor-border)!important;
background:#fff!important;
color:#6E6D66!important;
}
html[data-theme="light"] :is(.filter-btn,.cadm-btn-secondary,.column-filter-btn,.icon-action,.cav-item):hover { border-color:var(--aryvor-primary)!important; color:var(--aryvor-secondary)!important; }
html[data-theme="light"] .primary-action:hover,
html[data-theme="light"] .cadm-btn-primary:hover { color:#fff!important; }
html[data-theme="light"] .chip,
html[data-theme="light"] .tab-btn.active,
html[data-theme="light"] .segmented .active-segment { color:#5C6C96!important; }
html[data-theme="light"] :is(.universal-filter-menu,.column-filter-menu,.commessa-avatar-menu) {
border-color:var(--aryvor-border)!important;
background:#fff!important;
color:var(--aryvor-text)!important;
box-shadow:none;
}
html[data-theme="light"] .user-table-column-option { background:#fff; color:var(--aryvor-text); }
html[data-theme="light"] .user-table-column-option:hover { background:rgba(92,108,150,.06); }
html[data-theme="light"] .user-table-column-option input[type="checkbox"] { border-color:#A3A29B!important; background:#fff!important; }
html[data-theme="light"] .user-table-column-option input[type="checkbox"]::after { border-color:#fff; }
html[data-theme="light"] .user-table-columns-footer { background:#F7F6F1; }
html[data-theme="light"] :is(.import-decision-summary,.import-mode-option) { border-color:var(--aryvor-border); background:#fff; color:var(--aryvor-text); }
html[data-theme="light"] .import-mode-option:hover { background:#F7F6F1; }
html[data-theme="light"] .import-decision-intro h3,
html[data-theme="light"] .import-decision-summary strong { color:var(--aryvor-text); }
html[data-theme="light"] .import-decision-intro p,
html[data-theme="light"] .import-decision-summary span,
html[data-theme="light"] .import-mode-option span { color:var(--aryvor-muted); }
html[data-theme="light"] .import-mode-option small { color:var(--aryvor-secondary); }
html[data-theme="light"] :is(.ig-gantt-wrap,.gantt-legend-panel) { background:#fff!important; }
html[data-theme="light"] .ig-axis-row { background:#fff; }
html[data-theme="light"] .ig-axis { background:repeating-linear-gradient(90deg,rgba(92,108,150,.035) 0,rgba(92,108,150,.035) calc(10% - 1px),rgba(92,108,150,.14) calc(10% - 1px),rgba(92,108,150,.14) 10%)!important; }
html[data-theme="light"] .ig-area-group { background:#faf9fc; box-shadow:none; }
html[data-theme="light"] .ig-area-header { background:linear-gradient(90deg,rgba(92,108,150,.12),rgba(92,108,150,.05)); }
html[data-theme="light"] .ig-area-header strong,
html[data-theme="light"] .ig-row-label span { color:var(--aryvor-text); }
html[data-theme="light"] .ig-track,
html[data-theme="light"] .gantt-track { background:repeating-linear-gradient(90deg,#f6f5f9 0,#f6f5f9 calc(10% - 1px),#F7F6F1 calc(10% - 1px),#F7F6F1 10%)!important; }
html[data-theme="light"] .ig-row { border-color:#e5e3ea; }
html[data-theme="light"] .ig-row:hover { background:rgba(92,108,150,.045); }
html[data-theme="light"] .weekly-area-plan { background:#fff; }
html[data-theme="light"] .quality-step-card { background:#faf9fc; }
html[data-theme="light"] .quality-step-order { color:#5C6C96; background:rgba(92,108,150,.13); }
html[data-theme="light"] .rpt-act-bar-wrap { background:#e7e5ec!important; }
html[data-theme="light"] .rpt-notes { background:#fff!important; }
html[data-theme="light"] .split-view:not(.drawer-open)>#sideModule:not(:empty),
html[data-theme="light"] .split-view.drawer-open #sideModule { background:#fff!important; color:var(--aryvor-text); box-shadow:none; }
html[data-theme="light"] .right-drawer-backdrop { background:rgba(39,35,54,.26); }
html[data-theme="light"] .split-view.drawer-open #sideModule :is(.assignment-drawer-head,.punch-drawer-head),
html[data-theme="light"] body[data-view="progress"] .gantt-detail-header { background:#fff; }
html[data-theme="light"] .split-view.drawer-open #sideModule :is(input,select,textarea,.task-assignment-fieldset,.crew-summary>div,.detail-meta span,.punch-meta-grid>div,.punch-field-block),
html[data-theme="light"] body[data-view="progress"] .gantt-detail-card { background:#F7F6F1!important; color:var(--aryvor-text)!important; }
html[data-theme="light"] .split-view.drawer-open #sideModule :is(.assignment-drawer-head .module-header h2,.punch-drawer-head strong,.punch-drawer-title,.punch-meta-grid span,.punch-field-block p),
html[data-theme="light"] body[data-view="progress"] :is(.gantt-detail-header strong,.gantt-detail-card strong) { color:var(--aryvor-text); }
html[data-theme="light"] .split-view.drawer-open #sideModule .icon-btn,
html[data-theme="light"] body[data-view="progress"] .gantt-detail-close { background:#F7F6F1!important; color:#6E6D66!important; }
html[data-theme="light"] body[data-view="progress"] .gantt-detail-bar-bg { background:#e5e3ea; }
html[data-theme="light"] .table-page-number,
html[data-theme="light"] .table-page-nav { background:#fff; color:#6E6D66; }
html[data-theme="light"] .table-page-number.active { background:rgba(92,108,150,.13); color:#5C6C96; }
html[data-theme="light"] .commessa-card-logo,
html[data-theme="light"] .commessa-list-logo { color:#fff; }
html[data-theme="light"] .commessa-grid { gap:12px; background:transparent; }
html[data-theme="light"] .commessa-card,
html[data-theme="light"] .commessa-card-new,
html[data-theme="light"] .commessa-list-row { border:1px solid var(--aryvor-border)!important; background:#fff!important; }
html[data-theme="light"] .commessa-card:hover,
html[data-theme="light"] .commessa-card-new:hover,
html[data-theme="light"] .commessa-list-row:hover { background:#faf9fd!important; border-color:var(--aryvor-primary)!important; }
html[data-theme="light"] .commessa-page-title,
html[data-theme="light"] .commessa-brand,
html[data-theme="light"] .commessa-card-body h3,
html[data-theme="light"] .commessa-list-info strong { color:var(--aryvor-text)!important; }
html[data-theme="light"] .commessa-card-new h3 { color:var(--aryvor-muted)!important; }
html[data-theme="light"] .commessa-card-desc,
html[data-theme="light"] .commessa-card-meta,
html[data-theme="light"] .commessa-list-info span { color:var(--aryvor-muted)!important; }
html[data-theme="light"] .commessa-chip.plan-lite { background:#eef1f3; color:#6E6D66; }
html[data-theme="light"] .commessa-chip.plan-pro { background:#8496C2; color:#5C6C96; }
html[data-theme="light"] .commessa-chip.plan-ultra { background:#F7F6F1; color:#5C6C96; }
html[data-theme="light"] .commessa-chip { border-color:var(--aryvor-border)!important; background:#eeedf5!important; color:#6E6D66!important; }
html[data-theme="light"] .commessa-chip.plan-lite { background:#eef1f3!important; color:#6E6D66!important; }
html[data-theme="light"] .commessa-chip.plan-pro { background:#8496C2!important; color:#5C6C96!important; }
html[data-theme="light"] .commessa-chip.plan-ultra { background:#F7F6F1!important; color:#5C6C96!important; }
html[data-theme="light"] .cland-admin-toggle { border-color:var(--aryvor-border); background:#f2f1f6; color:var(--aryvor-text); }
html[data-theme="light"] .toggle { color:#6E6D66!important; }
html[data-theme="light"] .toggle span { background:#E3E0D5!important; }
html[data-theme="light"] .toggle input:checked + span { background:var(--aryvor-primary)!important; }
html[data-theme="light"] .gantt-topbar { border-color:var(--aryvor-border)!important; background:#fff!important; color:var(--aryvor-text)!important; }
html[data-theme="light"] .primary-action.ghost { border-color:var(--aryvor-border)!important; background:#fff!important; color:#5C6C96!important; }
html[data-theme="light"] .rpt-tabs { border-color:var(--aryvor-border)!important; }
html[data-theme="light"] .rpt-tab,
html[data-theme="light"] .rpt-nav-btn,
html[data-theme="light"] .rpt-print-btn { border-color:var(--aryvor-border)!important; background:#fff!important; color:#6E6D66!important; }
html[data-theme="light"] .rpt-tab.active { border-color:rgba(92,108,150,.35)!important; background:rgba(92,108,150,.12)!important; color:#5C6C96!important; }
html[data-theme="light"] .rpt-table thead,
html[data-theme="light"] .rpt-table th { background:#eeedf5!important; color:#6E6D66!important; }
html[data-theme="light"] .rpt-table td,
html[data-theme="light"] .rpt-date-label small { color:var(--aryvor-text)!important; }
html[data-theme="light"] :is(.cadm-toggle-item,.cadm-user-row,.cadm-mod-toggle,.cadm-user-toggle) { border-color:var(--aryvor-border)!important; background:#fff!important; color:var(--aryvor-text)!important; }
html[data-theme="light"] body[data-view="dashboard"] .kpi-card:first-child strong,
html[data-theme="light"] body[data-view="dashboard"] .kpi-card:nth-child(4) strong { background:radial-gradient(circle at center,#fff 56%,transparent 58%),conic-gradient(var(--aryvor-primary) var(--kpi-value,35%),#F7F6F1 0); }
/* ══════════════════════════════════════════════════════════════════════════
QR SCANNER & FIELD SUMMARY POPUP
══════════════════════════════════════════════════════════════════════════ */
/* ── Scanner overlay ───────────────────────────────────────────────────── */
.qr-scanner {
position:relative;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
.qr-scanner video {
width:100%;
max-width:400px;
aspect-ratio:1;
object-fit:cover;
border-radius:0;
background:#000;
box-shadow:none;
}
.qr-viewfinder {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-55%);
width:200px;
height:200px;
border:3px solid rgba(92,108,150,0.5);
border-radius:0;
box-shadow:none;
pointer-events:none;
animation:qr-pulse 2s ease-in-out infinite;
}
@keyframes qr-pulse {
0%,100% { border-color:rgba(92,108,150,0.5); }
50% { border-color:rgba(92,108,150,0.9); }
}
.qr-scanner p {
color:var(--muted);
font-size:13px;
font-weight:650;
text-align:center;
}
/* ── Summary popup ─────────────────────────────────────────────────────── */
.qr-summary {
display:flex;
flex-direction:column;
gap:18px;
}
.qr-summary-hero {
display:grid;
grid-template-columns:44px 1fr auto;
gap:14px;
align-items:center;
padding:18px;
border-radius:0;
background:var(--panel, #1C1C1A);
box-shadow:none;
}
.qr-type-icon {
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:0;
background:var(--panel, #141413);
box-shadow:none;
font-size:22px;
}
.qr-summary-info small {
color:var(--muted);
font-size:11px;
font-weight:700;
text-transform:uppercase;
}
.qr-summary-info h3 {
margin:4px 0 2px;
font-size:18px;
}
.qr-summary-info p {
margin:0;
color:var(--muted);
font-size:13px;
}
/* ── Traffic light ─────────────────────────────────────────────────────── */
.qr-traffic-light {
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
}
.qr-light-big {
display:block;
width:36px;
height:36px;
border-radius:0;
box-shadow:none;
}
.qr-light-big.qr-light-green { background:radial-gradient(circle at 35% 35%,#C3BFB1,#6E8F6B); box-shadow:none; }
.qr-light-big.qr-light-yellow { background:radial-gradient(circle at 35% 35%,#ffe066,#A8615C); box-shadow:none; }
.qr-light-big.qr-light-red { background:radial-gradient(circle at 35% 35%,#A8615C,#A8615C); box-shadow:none; }
.qr-traffic-light small {
color:var(--muted);
font-size:10px;
font-weight:700;
text-transform:uppercase;
}
/* ── Sections ──────────────────────────────────────────────────────────── */
.qr-section {
padding:16px;
border-radius:0;
background:var(--panel, #1C1C1A);
box-shadow:none;
}
.qr-section h4 {
margin:0 0 12px;
font-size:13px;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.3px;
color:var(--muted);
}
/* ── Progress bar ──────────────────────────────────────────────────────── */
.qr-progress-bar {
height:10px;
border-radius:0;
background:var(--panel, #141413);
box-shadow:none;
overflow:hidden;
margin-bottom:6px;
}
.qr-progress-fill {
height:100%;
border-radius:0;
background:linear-gradient(90deg,var(--aryvor-primary),#6E8F6B);
transition:width .4s ease;
}
.qr-pct {
display:block;
margin-bottom:10px;
font-size:22px;
font-weight:800;
}
/* ── Steps ─────────────────────────────────────────────────────────────── */
.qr-steps {
display:flex;
flex-wrap:wrap;
gap:8px;
}
.qr-step {
display:inline-flex;
align-items:center;
gap:5px;
padding:5px 10px;
border-radius:0;
background:var(--panel, #141413);
box-shadow:none;
font-size:12px;
font-weight:700;
color:var(--muted);
}
.qr-step.done {
color:#6E8F6B;
box-shadow:none;
}
/* ── Cable list ────────────────────────────────────────────────────────── */
.qr-cable-list {
display:grid;
gap:8px;
}
.qr-cable-row {
display:grid;
grid-template-columns:12px 1fr;
gap:10px;
align-items:center;
padding:8px 12px;
border-radius:0;
background:var(--panel, #141413);
box-shadow:none;
}
.qr-cable-row strong {
font-size:13px;
}
.qr-cable-row small {
grid-column:2;
color:var(--muted);
font-size:11px;
font-weight:650;
}
.qr-light {
width:10px;
height:10px;
border-radius:0;
}
.qr-light-green { background:#6E8F6B; }
.qr-light-yellow { background:#A8615C; }
.qr-light-red { background:#A8615C; }
.qr-more {
display:block;
margin-top:6px;
color:var(--muted);
font-size:11px;
font-weight:700;
}
/* ── QC status ─────────────────────────────────────────────────────────── */
.qr-qc-status {
display:flex;
align-items:center;
gap:12px;
}
.qr-qc-status small {
color:var(--muted);
font-size:12px;
}
/* ── Punch rows ────────────────────────────────────────────────────────── */
.qr-punch-row {
display:grid;
grid-template-columns:24px 1fr;
gap:10px;
align-items:start;
padding:8px 0;
border-bottom:1px solid rgba(92,108,150,0.08);
}
.qr-punch-row:last-of-type { border-bottom:none; }
.qr-priority {
display:grid;
place-items:center;
width:24px;
height:24px;
border-radius:0;
font-weight:800;
font-size:14px;
}
.qr-priority-1 { background:rgba(168,97,92,0.15); color:#A8615C; }
.qr-priority-2 { background:rgba(168,97,92,0.15); color:#A8615C; }
.qr-priority-3 { background:rgba(92,108,150,0.12); color:var(--muted); }
.qr-punch-row strong { font-size:13px; display:block; }
.qr-punch-row small { color:var(--muted); font-size:11px; }
/* ── Quick actions ─────────────────────────────────────────────────────── */
.qr-quick-actions h4 {
margin:0 0 12px;
font-size:13px;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.3px;
color:var(--muted);
}
.qr-action-grid {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
gap:12px;
}
.qr-action-btn {
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
padding:18px 12px;
border:none;
border-radius:0;
background:var(--panel, #141413);
box-shadow:none;
cursor:pointer;
transition:box-shadow .16s ease, transform .16s ease;
}
.qr-action-btn:hover {
box-shadow:none;
transform:translateY(-2px);
}
.qr-action-btn:active {
box-shadow:none;
transform:translateY(0);
}
.qr-action-btn > span {
display:grid;
place-items:center;
width:40px;
height:40px;
border-radius:0;
background:var(--panel, #141413);
box-shadow:none;
font-size:20px;
color:var(--aryvor-primary);
}
.qr-action-btn > strong {
font-size:12px;
font-weight:700;
text-align:center;
}
/* ── Summary footer ────────────────────────────────────────────────────── */
.qr-summary-footer {
display:flex;
justify-content:flex-end;
gap:10px;
padding-top:8px;
border-top:1px solid rgba(92,108,150,0.08);
}
/* ── QR Print Modal ───────────────────────────────────────────────────── */
.qr-print-modal { padding:8px 0; }
.qr-print-desc { color:var(--aryvor-text-secondary); font-size:.9rem; margin:0 0 16px; }
.qr-print-actions-top { display:flex; gap:8px; margin-bottom:12px; }
.qr-print-actions-top .filter-btn.small { font-size:.78rem; padding:4px 12px; }
.qr-print-type-list {
display:flex; flex-direction:column; gap:6px;
max-height:340px; overflow-y:auto;
background:var(--aryvor-surface,#0D0D0C); border-radius:0;
padding:12px;
}
.qr-print-type-row {
display:flex; align-items:center; gap:10px;
padding:8px 12px; border-radius:0; cursor:pointer;
background:var(--aryvor-surface-raised,#1C1C1A);
transition:background .15s;
}
.qr-print-type-row:hover { filter:brightness(1.05); }
.qr-print-type-row input[type="checkbox"] { width:18px; height:18px; accent-color:var(--aryvor-accent); flex-shrink:0; }
.qr-print-type-row span { flex:1; font-size:.9rem; font-weight:500; }
.qr-print-type-row small { color:var(--aryvor-text-secondary); font-size:.8rem; }
.qr-print-footer {
display:flex; justify-content:flex-end; gap:10px; margin-top:18px; padding-top:14px;
border-top:1px solid var(--aryvor-border);
}
.record-management-actions { display:flex; align-items:center; }
/* ══════════════════════════════════════════════════════════════════════════
UI POLISH — functional layout fixes only
══════════════════════════════════════════════════════════════════════════ */
/* 1. Reduce dead space between topbar and page title */
.hero-grid,.hero-grid.compact {
margin-top:8px!important;
padding-top:10px!important;
padding-bottom:14px!important;
}
/* 2. Fix search bar "double step" */
.topbar { padding:8px 24px!important; margin-bottom:0!important; }
.search { height:40px!important; border-radius:0; padding:0 14px!important; }
/* 3. Make Critical Only toggle more visible */
.toggle { font-size:12px!important; gap:10px!important; }
.toggle span { width:44px!important; height:24px!important; padding:3px!important; border-radius:0; }
.toggle span::after { width:18px!important; height:18px!important; }
.toggle input:checked + span::after { transform:translateX(20px)!important; }
/* 4. Page guide — inline in hero-controls */
.hero-controls .view-help { margin:0!important; }
.view-help { margin:8px 0 4px!important; }
.hero-controls .view-help-body { position:absolute; right:0; top:100%; z-index:10; width:min(520px,90vw); margin-top:8px!important; }
.hero-controls { position:relative; }
/* Page guide: permanent, predictable position on every supported page. */
.hero-title-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
width: 100%;
}
.hero-title-row #viewTitle { margin: 0; }
.hero-title-row .view-help { margin: 0 !important; }
.hero-title-row .view-help-toggle {
min-height: 34px;
padding: 6px 12px;
border-color: color-mix(in srgb, var(--aryvor-primary, #5C6C96) 45%, var(--line));
background: color-mix(in srgb, var(--aryvor-primary, #5C6C96) 8%, var(--surface));
color: var(--ink);
font-weight: 700;
}
.hero-title-row .view-help-toggle:hover,
.hero-title-row .view-help-toggle:focus-visible {
border-color: var(--aryvor-primary, #5C6C96);
background: color-mix(in srgb, var(--aryvor-primary, #5C6C96) 15%, var(--surface));
outline: none;
}
html[data-theme="light"] .hero-title-row .view-help-toggle {
border-color: #8496C2;
background: #F7F6F1;
color: #5C6C96;
}
/* Keep the guide refined and aligned to the far edge of the title panel. */
.hero-grid { position: relative; }
.hero-title-row .view-help {
position: absolute;
top: 16px;
right: 18px;
z-index: 3;
}
.hero-copy { padding-right: 150px; }
/* Compact production register controls: the table remains the focal point. */
#primaryModule > .production-register-header {
margin-bottom: 0 !important;
padding: 10px 14px !important;
border-radius:0;
}
#primaryModule > .production-register-header + .workflow-rule-banner {
grid-template-columns: auto minmax(0,1fr) auto;
margin: 0 0 8px !important;
padding: 7px 14px !important;
border-width: 0 1px 1px !important;
border-color: #3E3E39 !important;
border-left-width: 1px !important;
border-radius:0;
background: color-mix(in srgb, var(--aryvor-primary, #5C6C96) 5%, var(--surface)) !important;
}
#primaryModule > .production-register-header + .workflow-rule-banner > span {
color: var(--aryvor-primary, #5C6C96);
font-size: 9px;
letter-spacing: .08em;
text-transform: uppercase;
}
#primaryModule > .production-register-header + .workflow-rule-banner strong { font-size: 11px; }
#primaryModule > .production-register-header + .workflow-rule-banner small { margin-top: 1px; font-size: 10px; }
.installation-toolbar {
min-height: 0 !important;
padding: 7px 10px !important;
gap: 8px !important;
}
.installation-toolbar label { gap: 3px !important; font-size: 9px !important; }
.installation-toolbar select { min-height: 30px !important; padding-block: 4px !important; }
.installation-toolbar .filter-result-control {
display: flex;
align-items: center;
gap: 7px;
margin-left: auto;
}
.installation-toolbar .filter-result {
display: inline-flex;
align-items: baseline;
gap: 4px;
min-width: 0;
padding: 4px 8px;
}
.installation-export-inline { min-height: 30px; white-space: nowrap; }
.operational-quick-filters {
min-height: 42px;
padding: 6px 9px !important;
gap: 6px !important;
}
.production-toolbar-divider {
align-self: stretch;
width: 1px;
min-height: 26px;
margin: 0 4px;
background: var(--line);
}
.production-register-label {
color: var(--muted);
font-size: 9px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.operational-quick-filters .compact-action,
.operational-quick-filters .filter-btn { min-height: 30px; padding: 5px 10px; }
.equipment-row-legend,
.progress-row-legend { padding-block: 5px !important; }
@media (max-width: 860px) {
.hero-copy { padding-right: 0; }
.hero-title-row .view-help { position: static; margin-left: auto !important; }
.production-toolbar-divider { display: none; }
.production-register-label { flex-basis: 100%; }
}
/* Operational/customer report PDF preview. */
.pdf-preview-overlay {
position: fixed;
inset: 0;
z-index: 12000;
display: grid;
grid-template-rows: 64px minmax(0, 1fr);
width: 100vw;
height: 100vh;
background: #0D0D0C;
}
.pdf-preview-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 0 22px;
border-bottom: 1px solid #2E2E2A;
background: #141413;
color: #f4f3fb;
}
.pdf-preview-toolbar strong,
.pdf-preview-toolbar span { display: block; }
.pdf-preview-toolbar strong { font-size: 15px; }
.pdf-preview-toolbar span { margin-top: 2px; color: #C3BFB1; font-size: 12px; }
.pdf-preview-actions { display: flex; align-items: center; gap: 9px; }
.pdf-preview-actions button {
min-height: 36px;
padding: 0 14px;
border: 1px solid #6E6D66;
border-radius:0;
background: #1C1C1A;
color: #f4f3fb;
font-weight: 700;
cursor: pointer;
}
.pdf-preview-actions button[data-pdf-action="print"] {
border-color: var(--aryvor-primary, #5C6C96);
background: var(--aryvor-primary, #5C6C96);
color: #fff;
}
.pdf-preview-overlay > iframe {
display: block;
width: 100%;
height: 100%;
min-height: 0;
border: 0;
background: #eef0f5;
}
@media (max-width: 640px) {
.pdf-preview-overlay { grid-template-rows: auto minmax(0, 1fr); }
.pdf-preview-toolbar { align-items: flex-start; padding: 12px 14px; }
.pdf-preview-actions { flex-direction: column; align-items: stretch; }
}
/* 5. Print QR + Add Equipment side by side */
.record-management-actions { display:flex!important; align-items:center!important; gap:10px!important; flex-shrink:0!important; }
/* 6. Ensure table horizontal scroll works */
.table-wrap { overflow-x:auto!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; }
/* 7. Column drag reorder indicators */
th[data-user-col-key] { position:relative!important; overflow:visible!important; }
.is-reordering-columns th.column-drag-source { opacity:.35!important; background:rgba(92,108,150,0.15)!important; }
.is-reordering-columns th.column-drop-before::before,
.is-reordering-columns th.column-drop-after::after { z-index:20!important; width:4px!important; background:var(--aryvor-primary)!important; box-shadow:none; }
/* 8. Filter menus — z-index fix + search input styling */
.universal-filter-menu, .column-filter-menu { z-index:9999!important; }
.column-filter-search { display:block!important; margin-bottom:8px; }
.column-filter-search input { width:100%!important; box-sizing:border-box; padding:7px 10px!important; font-size:12px; }
.universal-filter-actions { display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line,rgba(92,108,150,0.1)); }
.universal-filter-actions button { padding:6px 12px!important; font-size:11px!important; }
/* ══════════════════════════════════════════════════════════════════════════
PAGE LAYOUT — global visual separation for ALL pages
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Main panel — visible canvas ─────────────────────────────────────── */
.panel {
background: #0D0D0C !important;
}
/* ── 2. Primary & side modules — elevated surface ───────────────────────── */
#primaryModule {
padding: 20px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
}
#sideModule:not(:empty) {
padding: 16px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
}
#progressModule:not(:empty), #detailModule:not(:empty) {
padding: 16px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
}
/* ── 3. Module header — section title with background ───────────────────── */
#primaryModule > .module-header {
margin-bottom: 14px !important;
padding: 14px 16px !important;
border: 1px solid #3E3E39 !important;
border-radius:0;
background: #1C1C1A !important;
}
/* ── 5. Record management bar — toolbar ─────────────────────────────────── */
.record-management-bar {
margin-bottom: 12px !important;
padding: 12px 14px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
}
/* ── 6. Workflow rule banner — guide box ─────────────────────────────────── */
.workflow-rule-banner {
margin-bottom: 12px !important;
padding: 12px 16px !important;
border: 1px solid #3E3E39 !important;
border-radius:0;
background: #1C1C1A !important;
}
/* ── 7. Installation filters bar ────────────────────────────────────────── */
.ops-filters, .installation-toolbar {
margin-bottom: 10px !important;
padding: 10px 14px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
}
/* ── 8. Quick filter chips — clearly grouped ────────────────────────────── */
.operational-quick-filters {
margin: 0 0 12px !important;
padding: 10px 14px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
}
/* ── 9. Row legends — subtle strip above table ──────────────────────────── */
.equipment-row-legend, .progress-row-legend {
margin: 0 0 10px !important;
padding: 8px 14px !important;
border: 1px solid #1C1C1A !important;
border-radius:0;
background: #141413 !important;
}
/* ── 10. Planning strips — timeline section ─────────────────────────────── */
.planning-strip {
margin-bottom: 12px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
}
/* ── 11. Selection action bar ───────────────────────────────────────────── */
.selection-action-bar {
margin-bottom: 12px !important;
border-color: rgba(92,108,150,.35) !important;
background: rgba(92,108,150,.08) !important;
}
/* ── 12. Table wrap — data container ────────────────────────────────────── */
.table-wrap {
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
}
/* ── 13. KPI section — cards with visible separation ────────────────────── */
.kpis {
gap: 12px !important;
border-bottom: 0 !important;
margin-bottom: 14px !important;
padding: 0 !important;
}
.kpi-card, .kpi-card.hot {
background: #1C1C1A !important;
border: 1px solid #3E3E39 !important;
border-radius:0;
padding: 16px 18px !important;
}
/* ── 14. Dashboard sections ─────────────────────────────────────────────── */
body[data-view="dashboard"] #primaryModule {
background: #141413 !important;
}
body[data-view="dashboard"] .split-view,
body[data-view="dashboard"] .lower-grid {
gap: 14px !important;
}
body[data-view="dashboard"] .dash-donuts {
padding: 18px !important;
margin-bottom: 16px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
}
body[data-view="dashboard"] .dash-donut-card {
border: 1px solid #3E3E39 !important;
border-radius:0;
background: #1C1C1A !important;
padding: 14px 10px !important;
}
body[data-view="dashboard"] .dash-bottom-split {
gap: 14px !important;
}
body[data-view="dashboard"] .dash-panel {
padding: 16px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
}
body[data-view="dashboard"] .dash-alert-strip {
margin-bottom: 16px !important;
padding: 12px 16px !important;
border: 1px solid rgba(168,97,92,.25) !important;
border-radius:0;
background: rgba(168,97,92,.06) !important;
}
body[data-view="dashboard"] .module {
background: #1C1C1A !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
}
/* ── 15. QC / Punch List sections ───────────────────────────────────────── */
.qc-kpi-toolbar, .qc-kpi-strip {
margin-bottom: 12px !important;
}
.qc-execution-intro {
margin-bottom: 12px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
padding: 14px 16px !important;
}
.qc-failed-banner {
margin-bottom: 12px !important;
border-radius:0;
}
.punch-page-header {
margin-bottom: 12px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid #2E2E2A !important;
}
.punch-filter-bar {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-bottom: 10px !important;
padding: 10px 14px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
}
.punch-report-bar {
margin-top: 14px !important;
padding: 10px 14px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
}
/* ── 16. QHSE sections ──────────────────────────────────────────────────── */
.qhse-overview {
margin-bottom: 14px !important;
padding: 16px !important;
border: 1px solid #3E3E39 !important;
border-radius:0;
background: #1C1C1A !important;
}
.qhse-kpis {
margin-bottom: 14px !important;
}
.qhse-kpis article {
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
}
.qhse-tabs {
margin-bottom: 14px !important;
}
/* ── 17. Grounding tabs ─────────────────────────────────────────────────── */
.grounding-tabs {
margin-bottom: 12px !important;
padding: 6px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
}
/* ── 18. Test instrument toolbar ────────────────────────────────────────── */
.test-instrument-toolbar {
margin-bottom: 12px !important;
padding: 12px 14px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
}
/* ── 19. Materials page ─────────────────────────────────────────────────── */
.material-shortage-strip {
margin-bottom: 12px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
}
/* ── 20. Work queue ─────────────────────────────────────────────────────── */
.wq-proposal-panel {
margin-bottom: 12px !important;
}
/* ── 21. Completion Control Tower / Constraints ─────────────────────────── */
.cct-summary, .constraints-summary {
margin-bottom: 14px !important;
}
/* ── 22. Import / Admin pages ───────────────────────────────────────────── */
.import-card, .area-plant-card, .quality-plan-card, .report-card {
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
}
/* ── 23. Predictive dashboard cards ─────────────────────────────────────── */
.predictive-card, .predictive-kpis article {
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
}
/* ── 24. Topology page ─────────────────────────────────────────────────── */
.topology-filters {
margin-bottom: 12px !important;
padding: 10px 14px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
}
.topology-legend {
margin-bottom: 10px !important;
padding: 8px 14px !important;
border: 1px solid #1C1C1A !important;
border-radius:0;
background: #141413 !important;
}
/* ── 25. Supervisor mapping ────────────────────────────────────────────── */
.supervisor-matrix-intro {
margin-bottom: 14px !important;
padding: 14px 16px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
}
/* ── 26. Materials alert & tabs ────────────────────────────────────────── */
.mat-alert-section {
border-color: #2E2E2A !important;
background: #1C1C1A !important;
}
.mat-tabs {
border-color: #2E2E2A !important;
}
/* ── 27. Energization ─────────────────────────────────────────────── */
.energization-ready-alert {
margin-bottom: 12px !important;
}
/* ── 28. Hero section — ensure KPIs visible ────────────────────────────── */
.hero-grid {
margin-bottom: 14px !important;
padding: 18px 20px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
}
/* ── 29. V3 page styles ────────────────────────────────────────────────── */
.v3-page-head {
margin-bottom: 14px !important;
padding: 16px !important;
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
}
.v3-kpi-grid {
margin-bottom: 14px !important;
}
.v3-kpi {
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
}
.v3-system-card {
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #1C1C1A !important;
}
.v3-info-banner {
border: 1px solid #3E3E39 !important;
border-radius:0;
background: #1C1C1A !important;
}
/* ── 30. Project Management (commesse-admin) ───────────────────────────── */
.cadm-project-accordion {
border: 1px solid #2E2E2A !important;
border-radius:0;
background: #141413 !important;
margin-bottom: 14px !important;
}
.cadm-card-header {
padding: 16px 18px !important;
background: #1C1C1A !important;
}
.cadm-project-body {
padding: 16px 18px !important;
background: #141413 !important;
}
.cadm-section {
padding-top: 14px !important;
border-top-color: #2E2E2A !important;
}
.cadm-mod-grid {
margin-top: 8px !important;
}
.ctr-card {
border-color: #2E2E2A !important;
background: #1C1C1A !important;
}
.ctr-card-header {
background: #1C1C1A !important;
border-bottom: 1px solid #2E2E2A !important;
}
.ctr-detail-grid {
padding: 12px !important;
}
.ctr-detail-label {
color: var(--muted) !important;
margin-bottom: 6px !important;
}
/* ══════════════════════════════════════════════════════════════════════════
LIGHT THEME — overrides for all sections above
══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .panel { background: #E3E0D5 !important; }
html[data-theme="light"] #primaryModule,
html[data-theme="light"] #sideModule:not(:empty),
html[data-theme="light"] #progressModule:not(:empty),
html[data-theme="light"] #detailModule:not(:empty) {
background: #fff !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] #primaryModule > .module-header,
html[data-theme="light"] .record-management-bar,
html[data-theme="light"] .workflow-rule-banner,
html[data-theme="light"] .test-instrument-toolbar {
background: #F7F6F1 !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .ops-filters,
html[data-theme="light"] .installation-toolbar,
html[data-theme="light"] .operational-quick-filters,
html[data-theme="light"] .punch-filter-bar,
html[data-theme="light"] .punch-report-bar {
background: #f0eff5 !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .equipment-row-legend,
html[data-theme="light"] .progress-row-legend {
background: #F7F6F1 !important;
border-color: #F7F6F1 !important;
}
html[data-theme="light"] .table-wrap {
background: #fff !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .kpi-card.hot {
background: #fff !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .grounding-tabs {
background: #f0eff5 !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .qhse-overview,
html[data-theme="light"] .qc-execution-intro {
background: #F7F6F1 !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .qhse-kpis article,
html[data-theme="light"] body[data-view="dashboard"] .dash-donut-card {
background: #f8f7fc !important;
border-color: #F7F6F1 !important;
}
html[data-theme="light"] body[data-view="dashboard"] .dash-donuts,
html[data-theme="light"] body[data-view="dashboard"] .dash-panel,
html[data-theme="light"] body[data-view="dashboard"] .module {
background: #fff !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .import-card,
html[data-theme="light"] .area-plant-card,
html[data-theme="light"] .quality-plan-card,
html[data-theme="light"] .report-card,
html[data-theme="light"] .predictive-card,
html[data-theme="light"] .predictive-kpis article {
background: #fff !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .topology-filters,
html[data-theme="light"] .supervisor-matrix-intro,
html[data-theme="light"] .mat-alert-section {
background: #F7F6F1 !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .topology-legend {
background: #F7F6F1 !important;
border-color: #F7F6F1 !important;
}
html[data-theme="light"] .hero-grid {
background: #fff !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .v3-page-head,
html[data-theme="light"] .v3-info-banner {
background: #F7F6F1 !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .v3-kpi,
html[data-theme="light"] .v3-system-card {
background: #fff !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .cadm-project-accordion {
background: #fff !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .cadm-card-header {
background: #F7F6F1 !important;
}
html[data-theme="light"] .cadm-project-body {
background: #fff !important;
}
html[data-theme="light"] .cadm-section {
border-top-color: #F7F6F1 !important;
}
html[data-theme="light"] .ctr-card {
border-color: #E3E0D5 !important;
background: #f8f7fc !important;
}
html[data-theme="light"] .ctr-card-header {
background: #f0eff5 !important;
border-bottom-color: #E3E0D5 !important;
}
/* ── 31. Operational usability polish ─────────────────────────────────── */
.cav-item {
display:flex;
align-items:center;
gap:10px;
width:100%;
padding:10px 14px;
border:0;
background:none;
color:var(--ink);
text-align:left;
font-size:13px;
cursor:pointer;
}
.cav-icon {
display:grid;
place-items:center;
flex:0 0 30px;
width:30px;
height:30px;
border:1px solid var(--line);
border-radius:0;
color:var(--aryvor-secondary);
background:color-mix(in srgb,var(--aryvor-secondary) 9%,transparent);
}
.cav-icon svg { width:17px; height:17px; }
.scan-button {
border:1px solid color-mix(in srgb,#5C6C96 70%,#fff) !important;
background:linear-gradient(135deg,#5C6C96,#5C6C96) !important;
box-shadow:none;
}
.scan-button strong { color:#fff !important; font-size:14px; }
.scan-button small { color:rgba(255,255,255,.9) !important; font-weight:650; }
.scan-button > span { color:#fff; background:rgba(255,255,255,.18) !important; }
.workflow-rule-banner + .ops-filters,
.workflow-rule-banner + .installation-toolbar { margin-top:18px !important; }
.workflow-kpis { gap:10px !important; background:transparent !important; }
.workflow-kpis > div {
border:1px solid var(--line) !important;
border-radius:0;
background:var(--surface) !important;
box-shadow:none !important;
}
.workflow-kpis > div span { color:var(--muted) !important; }
.workflow-kpis > div strong { color:var(--ink) !important; }
.productivity-method-card {
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin:14px 16px 18px !important;
padding:16px 18px !important;
border:1px solid color-mix(in srgb,var(--aryvor-secondary) 32%,var(--line)) !important;
border-radius:0;
background:linear-gradient(135deg,color-mix(in srgb,var(--aryvor-secondary) 8%,var(--surface)),var(--surface)) !important;
}
.productivity-method-card > div { display:grid; gap:4px; min-width:0; }
.productivity-method-card > div > span { color:var(--aryvor-secondary); font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.productivity-method-card > div > strong { color:var(--ink); font-size:14px; line-height:1.35; }
.productivity-method-card > div > small { color:var(--muted); font-size:10px; line-height:1.4; }
.predictive-grid { gap:18px !important; background:transparent !important; }
.predictive-grid > .predictive-card { border-radius:0; }
.predictive-curve-card { grid-column:1 / -1 !important; }
.predictive-risk-card,.predictive-scenarios { margin-top:2px !important; }
@media(max-width:720px) {
.productivity-method-card { align-items:stretch; flex-direction:column; }
}
/* ══════════════════════════════════════════════════════════════
Quick Plan (Piano Rapido)
══════════════════════════════════════════════════════════════ */
.qp-wrap { padding: 16px 20px; display: flex; flex-direction: column; gap: 18px; }
/* ── Date strip ── */
.qp-date-strip {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: var(--surface, #141413);
border: 1px solid var(--line, rgba(255,255,255,.12));
border-radius:0;
}
.qp-today-btn {
background: var(--hot, #5C6C96);
color: #fff;
border: none;
padding: 5px 13px;
border-radius:0;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.qp-nav-btn {
background: var(--surface, #1C1C1A);
color: var(--muted, #8496C2);
border: 1px solid var(--line, rgba(255,255,255,.12));
width: 30px; height: 30px;
border-radius:0;
cursor: pointer;
font-size: 14px;
display: flex; align-items: center; justify-content: center;
}
.qp-nav-btn:hover { border-color: var(--hot, #5C6C96); color: var(--hot, #5C6C96); }
.qp-date-label { font-size: 15px; font-weight: 500; }
.qp-published-badge {
font-size: 12px;
color: var(--ok, #6E8F6B);
background: rgba(92,108,150,.12);
padding: 3px 10px;
border-radius:0;
font-weight: 500;
}
.qp-spacer { flex: 1; }
.qp-publish-btn {
background: var(--ok, #6E8F6B);
color: #fff;
border: none;
padding: 7px 18px;
border-radius:0;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.qp-generate-btn {
background: var(--hot, #5C6C96);
color: #fff;
border: none;
padding: 7px 18px;
border-radius:0;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
/* ── Section labels ── */
.qp-section-label {
font-size: 13px;
font-weight: 600;
color: var(--muted, #8496C2);
text-transform: uppercase;
letter-spacing: .7px;
margin-bottom: -6px;
}
/* ── Situation KPI grid ── */
.qp-sit-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
@media (max-width: 800px) { .qp-sit-grid { grid-template-columns: repeat(2, 1fr); } }
.qp-sit-card {
background: var(--surface, #1C1C1A);
border: 1px solid var(--line, rgba(255,255,255,.12));
border-radius:0;
padding: 14px;
}
.qp-sit-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--muted, #6E6D66);
margin-bottom: 4px;
}
.qp-sit-value {
font-size: 26px;
font-weight: 700;
}
.qp-sit-detail {
font-size: 12px;
color: var(--muted, #8496C2);
margin-top: 3px;
}
.qp-good { color: var(--ok, #6E8F6B) !important; }
.qp-bad { color: var(--critical, #A8615C) !important; }
.qp-warn { color: var(--warn, #A8615C) !important; }
/* ── Crew assignment grid ── */
.qp-planning-board { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:14px; align-items:start; }
.qp-board-crews,.qp-board-activities { min-width:0; padding:12px; border:1px solid var(--line,rgba(255,255,255,.12)); border-radius:0; background:color-mix(in srgb,var(--surface,#1C1C1A) 88%,transparent); }
.qp-board-crews>header,.qp-board-activities>header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.qp-board-crews>header strong,.qp-board-activities>header strong { color:var(--ink); font-size:13px; }
.qp-board-crews>header span,.qp-board-activities>header span { display:grid; place-items:center; min-width:25px; height:25px; padding:0 7px; border-radius:0; color:#fff; background:var(--hot,#5C6C96); font-size:11px; font-weight:700; }
.qp-board-activities { position:sticky; top:12px; max-height:min(72vh,760px); overflow:auto; }
.qp-crew-grid { display: flex; flex-direction: column; gap: 8px; }
.qp-crew-row {
background: var(--surface, #1C1C1A);
border: 1px solid var(--line, rgba(255,255,255,.12));
border-radius:0;
overflow: hidden;
transition:border-color .15s,background .15s,outline-color .15s;
}
.qp-crew-header {
display: flex;
align-items: center;
padding: 10px 14px;
gap: 10px;
border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
}
.qp-crew-avatar {
width: 34px; height: 34px;
border-radius:0;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px; color: #fff;
flex-shrink: 0;
}
.qp-crew-info { flex: 1; min-width: 0; }
.qp-crew-info strong { font-size: 14px; display: block; }
.qp-crew-info small { font-size: 12px; color: var(--muted, #8496C2); }
.qp-crew-load {
display: flex; align-items: center; gap: 6px; font-size: 12px;
}
.qp-load-bar {
width: 72px; height: 5px;
background: rgba(255,255,255,.08);
border-radius:0; overflow: hidden;
}
.qp-load-fill { height: 100%; border-radius:0; }
.qp-load-ok .qp-load-fill { background: var(--ok, #6E8F6B); }
.qp-load-ok span { color: var(--ok, #6E8F6B); }
.qp-load-warn .qp-load-fill { background: var(--warn, #A8615C); }
.qp-load-warn span { color: var(--warn, #A8615C); }
.qp-load-over .qp-load-fill { background: var(--critical, #A8615C); }
.qp-load-over span { color: var(--critical, #A8615C); }
.qp-crew-tasks {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 10px 14px;
}
.qp-task-chip {
display: flex; align-items: center; gap: 5px;
background: var(--card, #1C1C1A);
border: 1px solid var(--line, rgba(255,255,255,.10));
border-radius:0;
padding: 6px 10px;
font-size: 12px;
cursor: grab;
transition: border-color .15s;
}
.qp-task-chip:hover { border-color: var(--hot, #5C6C96); }
.qp-dot, .qp-task-dot {
width: 7px; height: 7px;
border-radius:0;
flex-shrink: 0;
}
.qp-task-label { color: var(--fg, #e8e8ec); font-size: 12px; }
.qp-type-badge {
font-size: 10px; padding: 1px 5px; border-radius:0; font-weight: 600;
background: color-mix(in srgb, var(--badge-color, #8496C2) 18%, transparent);
color: var(--badge-color, #8496C2);
}
.qp-multiday-badge {
font-size: 9px; padding: 1px 4px; border-radius: 0; font-weight: 700;
background: color-mix(in srgb, #B99B57 22%, transparent);
color: #B99B57; letter-spacing: .3px; white-space: nowrap;
}
.qp-task-chip.qp-multiday { border-left: 2px solid #B99B57; }
html[data-theme="light"] .qp-multiday-badge { background: color-mix(in srgb, #8B7230 15%, transparent); color: #8B7230; }
html[data-theme="light"] .qp-task-chip.qp-multiday { border-left-color: #8B7230; }
.qp-task-tag { color: var(--muted, #8496C2); font-size: 11px; }
.qp-crew-empty .qp-crew-tasks { min-height: 36px; }
.qp-drop-hover { background: rgba(92,108,150,.12) !important; outline: 2px dashed var(--hot, #5C6C96); outline-offset: -3px; border-color:var(--hot,#5C6C96); }
.qp-empty-crew { color: var(--muted, #6E6D66); font-size: 12px; font-style: italic; }
.qp-more { color: var(--muted, #6E6D66); font-size: 12px; font-weight: 500; padding: 6px 8px; }
/* ── Unassigned ── */
.qp-unassigned {
background: var(--surface, #1C1C1A);
border: 1px solid var(--line, rgba(255,255,255,.10));
border-radius:0;
padding: 12px 14px;
}
.qp-unassigned-label {
font-size: 13px; font-weight: 500;
margin-bottom: 8px; color: var(--muted, #8496C2);
}
.qp-unassigned-chips { display:flex; flex-direction:column; gap:6px; }
.qp-unassigned-chips .qp-task-chip { width:100%; cursor:grab; }
.qp-unassigned-chips .qp-task-chip small { margin-left:auto; color:var(--muted); font-size:10px; }
.qp-unassigned-empty { color:var(--ok); font-style:normal; }
.qp-unassigned .qp-task-chip { background: var(--card, #1C1C1A); }
/* ── Weekly commitments table ── */
.qp-commits-wrap { border-radius:0; overflow: hidden; border: 1px solid var(--line, rgba(255,255,255,.12)); }
.qp-commits-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qp-commits-table thead th {
text-align: left;
padding: 9px 14px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--muted, #6E6D66);
border-bottom: 1px solid var(--line, rgba(255,255,255,.10));
background: var(--surface, #1C1C1A);
font-weight: 500;
}
.qp-commits-table tbody td {
padding: 9px 14px;
border-bottom: 1px solid var(--line, rgba(255,255,255,.06));
background: var(--card, #1C1C1A);
}
.qp-commits-table tbody tr:last-child td { border-bottom: none; }
.qp-commit-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius:0;
margin-right: 5px;
}
.qp-st-good { background: var(--ok, #6E8F6B); }
.qp-st-warn { background: var(--warn, #A8615C); }
.qp-st-bad { background: var(--critical, #A8615C); }
.qp-commits-empty { color: var(--muted, #6E6D66); font-size: 13px; font-style: italic; }
/* ── Footer ── */
.qp-footer {
display: flex; gap: 8px;
justify-content: flex-end;
padding-top: 2px;
}
.qp-footer-btn {
padding: 7px 16px;
border-radius:0;
font-size: 13px;
cursor: pointer;
background: var(--surface, #1C1C1A);
color: var(--muted, #8496C2);
border: 1px solid var(--line, rgba(255,255,255,.12));
}
.qp-footer-btn:hover { border-color: var(--hot, #5C6C96); color: #fff; }
.qp-footer-primary {
padding: 7px 18px;
border-radius:0;
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: var(--ok, #6E8F6B);
color: #fff;
border: none;
}
/* ── Light-theme overrides ── */
html[data-theme="light"] .qp-sit-card,
html[data-theme="light"] .qp-crew-row,
html[data-theme="light"] .qp-unassigned,
html[data-theme="light"] .qp-date-strip {
background: #fff !important;
border-color: #E3E0D5 !important;
}
html[data-theme="light"] .qp-board-crews,html[data-theme="light"] .qp-board-activities { background:#f7f6fb; border-color:#E3E0D5; }
@media (max-width:900px) {
.qp-planning-board { grid-template-columns:1fr; }
.qp-board-activities { position:static; max-height:none; }
}
html[data-theme="light"] .qp-crew-header { border-bottom-color: #F7F6F1 !important; }
html[data-theme="light"] .qp-commits-table thead th { background: #f0eff5 !important; border-bottom-color: #E3E0D5 !important; }
html[data-theme="light"] .qp-commits-table tbody td { background: #fff !important; border-bottom-color: #F7F6F1 !important; }
html[data-theme="light"] .qp-footer-btn { background: #f0eff5 !important; border-color: #E3E0D5 !important; color: #555 !important; }
html[data-theme="light"] .qp-task-chip { background: #F7F6F1 !important; border-color: #E3E0D5 !important; }
html[data-theme="light"] .qp-task-label { color: #141413 !important; }
html[data-theme="light"] .qp-load-bar { background: #F7F6F1 !important; }
html[data-theme="light"] .qp-sit-value { color: #141413; }
/* Project selector: clearly bounded and fully interactive project tiles. */
.commessa-grid { gap: 14px !important; background: transparent !important; }
.commessa-card,
.commessa-list-row {
border: 1px solid var(--aryvor-border-strong, #3E3E39) !important;
cursor: pointer !important;
transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
.commessa-card:hover,
.commessa-card:focus-visible,
.commessa-list-row:hover,
.commessa-list-row:focus-visible {
border-color: var(--aryvor-primary, #5C6C96) !important;
background: color-mix(in srgb, var(--aryvor-primary, #5C6C96) 7%, var(--aryvor-elevated, #141413)) !important;
box-shadow:none;
transform: translateY(-2px) !important;
outline: none;
}
.commessa-card:active,
.commessa-list-row:active { transform: translateY(0) !important; }
.commessa-card-new { border-style: dashed !important; }
.commessa-brand .brand-version {
min-width: 28px;
height: 20px;
margin-left: 7px;
border: 1px solid rgba(255,255,255,.32);
background: var(--aryvor-primary, #5C6C96) !important;
color: #fff !important;
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: .08em;
vertical-align: 2px;
box-shadow:none;
}
html[data-theme="light"] .commessa-card,
html[data-theme="light"] .commessa-list-row { border-color: #E3E0D5 !important; }
html[data-theme="light"] .commessa-card:hover,
html[data-theme="light"] .commessa-card:focus-visible,
html[data-theme="light"] .commessa-list-row:hover,
html[data-theme="light"] .commessa-list-row:focus-visible {
border-color: var(--aryvor-primary, #5C6C96) !important;
background: #F7F6F1 !important;
box-shadow:none;
}
/* Final production density overrides (kept last to win over legacy themes). */
#primaryModule > .production-register-header + .workflow-rule-banner + .ops-filters,
#primaryModule > .production-register-header + .workflow-rule-banner + .installation-toolbar { margin-top: 0 !important; }
#primaryModule > .production-register-header + .workflow-rule-banner { margin-bottom: 8px !important; }
.operational-quick-filters .production-export-btn,
.operational-quick-filters .compact-action { margin: 0 !important; }
/* Screenshot-directed production layout: definitive cascade overrides. */
.hero-grid > .view-help {
position: absolute !important;
top: 16px !important;
right: 18px !important;
left: auto !important;
z-index: 4;
margin: 0 !important;
}
#primaryModule > .production-register-header {
margin-bottom: 0 !important;
border-bottom-color: transparent !important;
border-radius:0;
}
#primaryModule > .production-register-header + .workflow-rule-banner {
position: static !important;
min-height: 0 !important;
margin: 0 0 8px !important;
padding: 6px 14px !important;
border: 1px solid var(--line) !important;
border-top: 0 !important;
border-radius:0;
box-shadow:none;
}
#primaryModule > .production-register-header + .workflow-rule-banner > span {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
#primaryModule > .production-register-header + .workflow-rule-banner strong { font-size: 11px !important; }
#primaryModule > .production-register-header + .workflow-rule-banner small { font-size: 10px !important; }
body[data-view="installations"] .installation-toolbar {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
gap: 10px !important;
min-height: 0 !important;
padding: 7px 10px !important;
}
body[data-view="installations"] .installation-toolbar > label {
flex: 0 1 260px;
min-width: 180px;
margin: 0 !important;
}
body[data-view="installations"] .installation-toolbar select { min-height: 34px !important; }
body[data-view="installations"] .installation-toolbar > .filter-result-control {
display: flex !important;
align-items: center !important;
gap: 9px !important;
width: auto !important;
margin: 0 0 1px auto !important;
white-space: nowrap;
}
body[data-view="installations"] .installation-toolbar .installation-export-inline {
flex: 0 0 auto !important;
width: auto !important;
min-height: 34px !important;
margin: 0 0 1px !important;
}
.operational-quick-filters {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
min-height: 42px !important;
padding: 7px 10px !important;
overflow-x: auto;
}
.operational-quick-filters > * { flex-shrink: 0; }
.operational-quick-filters .production-toolbar-divider {
flex: 0 0 1px;
align-self: stretch;
width: 1px;
min-height: 28px;
background: var(--line);
}
.operational-quick-filters .universal-table-toolbar-inline {
flex: 0 0 auto;
margin-left: auto !important;
}
.production-register-label { display: none !important; }
@media (max-width: 900px) {
.hero-grid > .view-help {
position: static !important;
justify-self: end;
margin-top: 8px !important;
}
body[data-view="installations"] .installation-toolbar { flex-wrap: wrap !important; }
body[data-view="installations"] .installation-toolbar > .filter-result-control { margin-left: 0 !important; }
}
/* Final shared layout for production registers. */
.hero-grid > .view-help {
position: absolute !important;
top: 16px !important;
right: 18px !important;
left: auto !important;
z-index: 4;
margin: 0 !important;
}
#primaryModule > .production-register-header {
margin-bottom: 0 !important;
border-bottom-color: transparent !important;
border-radius:0;
}
#primaryModule > .production-register-header + .workflow-rule-banner {
position: static !important;
min-height: 0 !important;
margin: 0 0 8px !important;
padding: 6px 14px !important;
border: 1px solid var(--line) !important;
border-top: 0 !important;
border-radius:0;
box-shadow:none;
}
#primaryModule > .production-register-header + .workflow-rule-banner > span {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
#primaryModule > .production-register-header + .workflow-rule-banner strong { font-size: 11px !important; }
#primaryModule > .production-register-header + .workflow-rule-banner small { font-size: 10px !important; }
body[data-view="installations"] .installation-toolbar {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
gap: 10px !important;
min-height: 0 !important;
padding: 7px 10px !important;
}
body[data-view="installations"] .installation-toolbar > label {
flex: 0 1 260px;
min-width: 180px;
margin: 0 !important;
}
body[data-view="installations"] .installation-toolbar select { min-height: 34px !important; }
body[data-view="installations"] .installation-toolbar > .filter-result-control {
display: flex !important;
align-items: center !important;
gap: 9px !important;
width: auto !important;
margin: 0 0 1px auto !important;
white-space: nowrap;
}
body[data-view="installations"] .installation-toolbar .installation-export-inline {
flex: 0 0 auto !important;
width: auto !important;
min-height: 34px !important;
margin: 0 0 1px !important;
}
.operational-quick-filters {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
min-height: 42px !important;
padding: 7px 10px !important;
overflow-x: auto;
}
.operational-quick-filters > * { flex-shrink: 0; }
.operational-quick-filters .production-toolbar-divider {
flex: 0 0 1px;
align-self: stretch;
width: 1px;
min-height: 28px;
background: var(--line);
}
.operational-quick-filters .universal-table-toolbar-inline {
flex: 0 0 auto;
margin-left: auto !important;
}
.production-register-label { display: none !important; }
@media (max-width: 900px) {
.hero-grid > .view-help {
position: static !important;
justify-self: end;
margin-top: 8px !important;
}
body[data-view="installations"] .installation-toolbar { flex-wrap: wrap !important; }
body[data-view="installations"] .installation-toolbar > .filter-result-control { margin-left: 0 !important; }
}
/* Final alignment pass. */
.hero-grid .hero-title-row .view-help {
position: absolute !important;
top: 16px !important;
right: 18px !important;
left: auto !important;
margin: 0 !important;
}
.area-supervisor-line,
.area-reference-line { display: block; margin-top: 4px; }
.area-supervisor-line b { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.area-reference-line { color: var(--muted); }
.users-overview-bar {
display: grid;
grid-template-columns: auto minmax(260px,1fr);
align-items: center;
gap: 8px 14px;
margin-bottom: 10px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius:0;
background: var(--soft);
}
.users-overview-bar .users-tabs { margin: 0; padding: 4px; }
.users-overview-bar .users-command-bar { margin: 0; padding: 0; }
.users-create-hint { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; }
.mat-tabs .materials-columns-inline {
display: inline-flex;
align-items: center;
margin: 0 !important;
padding: 0 !important;
}
.page-guide-procedure {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.page-guide-procedure h3 { margin: 0 0 12px; font-size: 14px; }
.page-guide-procedure ol { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.page-guide-procedure li { padding-left: 4px; }
.page-guide-procedure li strong,
.page-guide-procedure li span { display: block; }
.page-guide-procedure li span { margin-top: 3px; color: var(--muted); line-height: 1.55; }
@media (max-width: 820px) {
.users-overview-bar { grid-template-columns: 1fr; }
.users-create-hint { grid-column: 1; }
}
/* Unified page width: every full-page module uses the complete content canvas. */
.split-view.full-layout,
.split-view.full-layout #primaryModule,
.split-view.production-layout,
.split-view.production-layout #primaryModule,
.split-view.workflow-layout,
.split-view.workflow-layout #primaryModule {
width: 100% !important;
max-width: none !important;
min-width: 0;
box-sizing: border-box;
}
.split-view.full-layout #primaryModule > *,
.split-view.production-layout #primaryModule > *,
.split-view.workflow-layout #primaryModule > * {
max-width: none;
box-sizing: border-box;
}
.field-shell,
.qp-wrap,
.predictive-wrap,
.workforce-dashboard,
.workforce-content,
.v3-page-content {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
.qp-wrap { padding: 0 !important; }
body[data-view="field"] #primaryModule,
body[data-view="quick-plan"] #primaryModule,
body[data-view="workforce"] #primaryModule {
width: 100% !important;
max-width: none !important;
}
body[data-view="workforce"] :is(.productivity-method-card,.workforce-workflow-guide) {
margin-left: 0 !important;
margin-right: 0 !important;
}
body[data-view="workforce"] :is(.wf-form-card,.weekly-staffing-register,.workforce-weekly-history,.work-group-manager,.contractor-comparison) {
width: 100%;
max-width: none;
box-sizing: border-box;
}
body[data-view="quick-plan"] :is(.qp-date-strip,.qp-sit-grid,.qp-planning-board,.qp-commits-table-wrap),
body[data-view="field"] :is(.v3-page-head,.field-lookup,.v3-tabs,.field-asset-grid,.field-asset-hero,.field-evidence,.field-datasheets,.field-asset-header,.field-asset-summary,.field-tab-body,.field-tab-bar) {
width: 100%;
max-width: none;
box-sizing: border-box;
}
/* Consistent framing and top-level controls. */
.login-global-controls {
position: fixed;
top: 22px;
right: 24px;
z-index: 1001;
display: inline-flex;
align-items: center;
gap: 10px;
}
.login-global-controls select {
min-height: 38px;
padding: 0 30px 0 11px;
border: 1px solid var(--line);
border-radius:0;
background: var(--surface);
color: var(--text);
}
.login-card { border: 1px solid var(--line) !important; }
.login-card input[type="email"],
.login-card input[type="password"] {
border: 1px solid var(--line) !important;
border-radius:0;
background: var(--surface) !important;
padding: 11px 12px !important;
}
html[data-theme="light"] .login-card {
border-color: #E3E0D5 !important;
box-shadow:none;
}
html[data-theme="light"] .login-card input[type="email"],
html[data-theme="light"] .login-card input[type="password"] {
border-color: #C3BFB1 !important;
background: #fff !important;
}
html[data-theme="light"] .commessa-card,
html[data-theme="light"] .commessa-list-row {
border-color: #C3BFB1 !important;
background: #fff !important;
box-shadow:none;
}
/* Use the same segmented-tab language across administration pages. */
.users-tabs {
display: inline-flex;
gap: 4px;
margin: 0 16px 12px;
padding: 4px;
border: 1px solid var(--line);
border-radius:0;
background: var(--soft);
}
.users-tab {
min-height: 34px;
padding: 0 14px;
border: 0;
border-radius:0;
background: transparent;
}
.users-tab.active {
border: 0;
background: var(--surface);
color: var(--text);
box-shadow:none;
}
body[data-view="templates"] .qc-workspace-intro {
position: sticky;
top: 8px;
z-index: 8;
width: 100%;
max-width: none;
margin-bottom: 18px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius:0;
background: var(--surface);
box-shadow:none;
}
@media (max-width: 640px) {
.login-global-controls { top: 14px; right: 14px; }
}
/* Production register compaction must override the legacy spacing rules. */
#primaryModule > .production-register-header + .workflow-rule-banner + .ops-filters,
#primaryModule > .production-register-header + .workflow-rule-banner + .installation-toolbar { margin-top: 0 !important; }
#primaryModule > .production-register-header + .workflow-rule-banner { margin-bottom: 8px !important; }
.operational-quick-filters .production-export-btn,
.operational-quick-filters .compact-action { margin: 0 !important; }
/* Keep the screenshot-directed composition last in the cascade. */
.hero-grid > .view-help { position:absolute !important; top:16px !important; right:18px !important; left:auto !important; z-index:4; margin:0 !important; }
#primaryModule > .production-register-header { margin-bottom:0 !important; border-bottom-color:transparent !important; border-radius:0; }
#primaryModule > .production-register-header + .workflow-rule-banner { position:static !important; min-height:0 !important; margin:0 0 8px !important; padding:6px 14px !important; border:1px solid var(--line) !important; border-top:0 !important; border-radius:0; box-shadow:none !important; }
#primaryModule > .production-register-header + .workflow-rule-banner > span { display:flex; align-items:center; gap:8px; min-width:0; }
#primaryModule > .production-register-header + .workflow-rule-banner strong { font-size:11px !important; }
#primaryModule > .production-register-header + .workflow-rule-banner small { font-size:10px !important; }
body[data-view="installations"] .installation-toolbar { display:flex !important; flex-wrap:nowrap !important; align-items:flex-end !important; gap:10px !important; min-height:0 !important; padding:7px 10px !important; }
body[data-view="installations"] .installation-toolbar > label { flex:0 1 260px; min-width:180px; margin:0 !important; }
body[data-view="installations"] .installation-toolbar select { min-height:34px !important; }
body[data-view="installations"] .installation-toolbar > .filter-result-control { display:flex !important; align-items:center !important; gap:9px !important; width:auto !important; margin:0 0 1px auto !important; white-space:nowrap; }
body[data-view="installations"] .installation-toolbar .installation-export-inline { flex:0 0 auto !important; width:auto !important; min-height:34px !important; margin:0 0 1px !important; }
.operational-quick-filters { display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:8px !important; min-height:42px !important; padding:7px 10px !important; overflow-x:auto; }
.operational-quick-filters > * { flex-shrink:0; }
.operational-quick-filters .production-toolbar-divider { flex:0 0 1px; align-self:stretch; width:1px; min-height:28px; background:var(--line); }
.operational-quick-filters .universal-table-toolbar-inline { flex:0 0 auto; margin-left:auto !important; }
.production-register-label { display:none !important; }
@media (max-width:900px) {
.hero-grid > .view-help { position:static !important; justify-self:end; margin-top:8px !important; }
body[data-view="installations"] .installation-toolbar { flex-wrap:wrap !important; }
body[data-view="installations"] .installation-toolbar > .filter-result-control { margin-left:0 !important; }
}
/* Workforce page: one aligned content grid with compact vertical rhythm. */
body[data-view="workforce"] #primaryModule {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px !important;
}
body[data-view="workforce"] #primaryModule > .module-header {
width: 100%;
min-height: 52px;
margin: 0 !important;
padding: 10px 14px !important;
box-sizing: border-box;
}
body[data-view="workforce"] #primaryModule > :is(.wf-firm-tabs,.productivity-method-card,.workforce-workflow-guide,.wf-form-card) {
width: 100% !important;
margin: 0 !important;
box-sizing: border-box;
}
body[data-view="workforce"] .productivity-method-card {
min-height: 0;
padding: 11px 14px !important;
}
body[data-view="workforce"] .workforce-workflow-guide {
align-items: center;
padding: 9px 14px;
}
body[data-view="workforce"] .workforce-workflow-guide ol {
width: 100%;
align-items: start;
gap: 18px;
}
body[data-view="workforce"] .wf-form-card {
padding: 12px 14px;
}
body[data-view="workforce"] .workforce-control-total .wf-form-row {
align-items: end;
gap: 8px;
}
body[data-view="workforce"] .form-validation-message {
margin: 8px 0 10px;
padding: 9px 11px;
border: 1px solid rgba(168,97,92, .45);
border-radius:0;
background: rgba(168,97,92, .09);
color: var(--text);
font-size: 12px;
}
body[data-view="workforce"] .workforce-control-total .primary-action:disabled {
opacity: .45;
cursor: not-allowed;
transform: none;
}
body[data-view="workforce"] .weekly-staffing-register > .module-header {
margin: 0 0 8px !important;
padding-bottom: 8px;
}
body[data-view="workforce"] .weekly-workforce-summary {
gap: 8px;
margin-bottom: 8px;
}
@media (max-width:900px) {
body[data-view="workforce"] #primaryModule { padding: 10px !important; }
body[data-view="workforce"] .workforce-workflow-guide { align-items: stretch; }
}
.work-group-efficiency {
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.work-group-efficiency input {
width: 66px;
min-height: 32px;
padding: 5px 7px;
border: 1px solid var(--line);
border-radius:0;
background: var(--surface-2);
color: var(--text);
}
.work-group-efficiency span { color: var(--muted); font-size: 11px; }
.workforce-hours-preview { min-width:150px; padding:8px 10px; border:1px solid var(--border); border-radius:0; background:rgba(92,108,150,.07); }
.workforce-hours-preview span,.workforce-hours-preview strong { display:block; }
.workforce-hours-preview span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.workforce-hours-preview strong { margin-top:3px; font-size:15px; }
.qp-ready-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:9px; border-bottom:1px solid var(--border); background:rgba(92,108,150,.04); }
.qp-ready-filters label { min-width:0; color:var(--muted); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.qp-ready-filters select { width:100%; margin-top:4px; padding:7px 8px; border:1px solid var(--border); border-radius:0; background:var(--surface); color:var(--text); font-size:11px; text-transform:none; letter-spacing:0; }
@media(max-width:760px){.qp-ready-filters{grid-template-columns:1fr}}
.qp-generation-options { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0 0 10px; padding:10px 12px; border:1px solid var(--border); border-radius:0; background:rgba(92,108,150,.05); }
.qp-generation-options strong { margin-right:4px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.qp-generation-options label { display:inline-flex; align-items:center; gap:6px; color:var(--text); font-size:11px; cursor:pointer; }
.qp-generation-options input { accent-color:var(--accent); }
.qp-generation-options small { flex:1 1 100%; color:var(--muted); font-size:10px; }
.qp-task-chip { position:relative; }
.qp-remove-assignment { display:inline-grid; place-items:center; flex:0 0 22px; width:22px; height:22px; margin-left:auto; padding:0; border:1px solid rgba(168,97,92,.45); border-radius:0; background:rgba(168,97,92,.09); color:var(--critical); font-size:16px; line-height:1; cursor:pointer; }
.qp-remove-assignment:hover { background:rgba(168,97,92,.2); border-color:var(--critical); }
/* Pro · OPI material receipt */
.opi-receipt-form { display:grid; gap:14px; }
.opi-header-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.opi-header-grid label,.opi-notes { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.opi-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:0; background:var(--surface-1); }
.opi-table { width:100%; border-collapse:collapse; min-width:720px; }
.opi-table th,.opi-table td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.opi-table th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.opi-table tbody tr:last-child td { border-bottom:0; }
.opi-table input[type="number"] { min-width:110px; }
.opi-reel-list { display:flex; flex-direction:column; gap:4px; min-width:220px; }
.opi-reel-entry { display:flex; gap:6px; align-items:center; }
.opi-reel-entry .opi-reel-code { width:80px; flex-shrink:0; }
.opi-reel-entry .icon-btn { flex-shrink:0; }
.opi-add-reel-btn { margin-top:4px; }
.opi-line-select { display:flex; align-items:center; gap:10px; cursor:pointer; }
.opi-line-select span { display:grid; gap:2px; }
.opi-line-select small,.opi-register-head small { display:block; color:var(--muted); }
.opi-notes textarea { min-height:76px; resize:vertical; }
.opi-register-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; padding:12px 14px; border:1px solid var(--line); border-radius:0; background:var(--surface-1); }
.opi-register-head > div { display:grid; gap:3px; }
.opi-page { width:100%; display:grid; gap:16px; }
.opi-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:20px 22px; border:1px solid var(--line); border-radius:0; background:linear-gradient(135deg,var(--surface-1),var(--surface-2)); }
.opi-page-header h2 { margin:4px 0 5px; font-size:26px; color:var(--text); }
.opi-page-header p { margin:0; color:var(--muted); }
.opi-receipt-page-form { gap:16px; }
.opi-document-card,.opi-photo-card,.opi-materials-card { padding:18px; border:1px solid var(--line); border-radius:0; background:var(--surface-1); }
.opi-document-card { display:grid; gap:14px; }
.opi-photo-card { display:grid; grid-template-columns:minmax(250px,.8fr) auto minmax(360px,1.4fr); align-items:center; gap:18px; }
.opi-photo-card > div:first-child { display:grid; gap:5px; }
.opi-photo-card small { color:var(--muted); }
.opi-photo-upload { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 14px; border:1px dashed var(--accent); border-radius:0; color:var(--accent); font-weight:800; cursor:pointer; white-space:nowrap; }
.opi-photo-upload input { display:none; }
.opi-photo-preview { display:flex; gap:10px; min-height:64px; align-items:center; overflow-x:auto; }
.opi-photo-preview figure { flex:0 0 116px; margin:0; display:grid; grid-template-columns:48px 1fr; align-items:center; gap:8px; }
.opi-photo-preview img { width:48px; height:48px; object-fit:cover; border-radius:0; border:1px solid var(--line); }
.opi-photo-preview figcaption { min-width:0; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opi-photo-preview figcaption small { display:block; margin-top:3px; }
.opi-filter-bar { display:grid; grid-template-columns:minmax(260px,2fr) repeat(4,minmax(150px,1fr)); gap:10px; align-items:end; }
.opi-filter-bar label { display:grid; gap:5px; color:var(--muted); font-size:11px; font-weight:750; }
.opi-selection-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; color:var(--muted); font-size:12px; font-weight:750; }
.opi-show-closed { display:inline-flex; align-items:center; gap:6px; margin-right:auto; font-weight:600; }
.opi-line-closed td { color:var(--muted); }
.mat-receipt-mode { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-4px 0 12px; font-size:12px; }
.mat-receipt-mode small { flex-basis:100%; color:var(--muted); }
.purchase-request-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.purchase-proposal-table td small,.purchase-request-table td small { display:block; color:var(--muted); }
.mat-row-voided td { color:var(--muted); text-decoration:line-through; }
.mat-row-voided td small, .mat-row-voided td .status { text-decoration:none; }
.mat-waste-block label { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mat-waste-block small { display:block; color:var(--muted); margin-top:4px; }
.opi-edit-reel { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.opi-page-table-wrap { max-height:min(58vh,720px); overflow:auto; }
.opi-page-table-wrap .opi-table { min-width:1040px; }
.opi-page-table-wrap .opi-table thead { position:sticky; top:0; z-index:3; background:var(--surface-1); box-shadow:none; }
.opi-page-table-wrap .opi-material-row { content-visibility:auto; contain-intrinsic-size:58px; }
.opi-page-table-wrap .opi-table th:first-child { min-width:360px; }
.opi-page-table-wrap .opi-table td:nth-child(2) { min-width:190px; }
.opi-page-table-wrap .opi-table td:nth-child(3) { min-width:130px; }
.opi-page-actions { position:sticky; bottom:10px; z-index:5; display:flex; justify-content:flex-end; gap:10px; padding:13px; border:1px solid var(--line); border-radius:0; background:color-mix(in srgb,var(--surface-1) 94%,transparent); box-shadow:none; backdrop-filter:blur(10px); }
.opi-photo-links { display:flex; flex-wrap:wrap; gap:4px; }
.opi-photo-link { width:28px; height:28px; border:1px solid var(--line); border-radius:0; background:var(--surface-2); color:var(--accent); cursor:pointer; }
@media (max-width:760px) {
.opi-header-grid { grid-template-columns:1fr; }
.opi-register-head { align-items:stretch; flex-direction:column; }
.opi-page-header { flex-direction:column; }
.opi-photo-card { grid-template-columns:1fr; }
.opi-filter-bar { grid-template-columns:1fr 1fr; }
.opi-search-field { grid-column:1 / -1; }
}
/* ══════════════════════════════════════════════════════════════════════════════
A4 Control Plan Gallery — doc-card grid + split-panel popup
══════════════════════════════════════════════════════════════════════════════ */
.cp-gallery {
display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px; padding:16px 0 20px;
}
.cp-doc-card {
background:var(--aryvor-surface, #0D0D0C); border:1px solid var(--aryvor-border, #2E2E2A);
border-radius:0; overflow:hidden; cursor:pointer;
transition:border-color .2s,box-shadow .2s,transform .15s;
}
.cp-doc-card:hover {
border-color:var(--aryvor-primary, #8496C2);
box-shadow:none; transform:translateY(-2px);
}
.cp-doc-card.new-card {
border-style:dashed; display:flex; align-items:center; justify-content:center; min-height:280px;
}
.cp-new-inner { text-align:center; color:var(--muted); }
.cp-new-inner .cp-new-icon { font-size:32px; margin-bottom:8px; }
.cp-new-inner .cp-new-label { font-size:13px; }
/* ── A4 miniature paper preview ── */
.cp-preview {
background:#f8f7fc; margin:12px 12px 0; border-radius:0;
padding:14px 12px 10px; aspect-ratio:210/160; overflow:hidden; position:relative;
}
html[data-theme="light"] .cp-preview { background:#f0eff7; }
.cp-preview-hd {
border-bottom:1.5px solid #F7F6F1; padding-bottom:6px; margin-bottom:6px;
display:flex; align-items:center; gap:6px;
}
.cp-preview-logo {
width:20px; height:20px; border-radius:0;
background:var(--aryvor-primary,#5C6C96); display:flex; align-items:center; justify-content:center;
font-size:7px; font-weight:800; color:#fff; flex-shrink:0;
}
.cp-preview-co-logo {
width:20px; height:20px; border-radius:0; object-fit:contain; flex-shrink:0;
}
.cp-preview-title { font-size:7px; font-weight:700; color:#141413; text-transform:uppercase; letter-spacing:.3px; }
.cp-preview-code { font-size:6px; color:#6E6D66; }
.cp-preview-rows { display:flex; flex-direction:column; gap:3px; }
.cp-preview-row {
display:flex; align-items:center; gap:4px;
font-size:6px; color:#141413; padding:2px 0; border-bottom:.5px solid #F7F6F1;
}
.cp-preview-chk {
width:7px; height:7px; border:1px solid #bbb; border-radius:0; flex-shrink:0;
}
.cp-preview-chk.filled { background:var(--aryvor-primary,#5C6C96); border-color:var(--aryvor-primary,#5C6C96); }
.cp-preview-row .cp-text { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-preview-row .cp-tag { font-size:5px; color:#6E6D66; text-transform:uppercase; }
.cp-preview-sig {
margin-top:8px; padding-top:5px; border-top:.5px dashed #F7F6F1; display:flex; gap:12px;
}
.cp-sig-box { flex:1; text-align:center; font-size:5px; color:#6E6D66; text-transform:uppercase; }
.cp-sig-line { border-bottom:.5px solid #F7F6F1; height:10px; margin-bottom:2px; }
/* ── Card footer meta ── */
.cp-meta { padding:10px 12px; }
.cp-meta-title { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.cp-meta-code { font-size:11px; color:var(--muted); }
.cp-meta-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.cp-badge {
font-size:10px; font-weight:600; padding:2px 8px; border-radius:0;
}
.cp-badge.published { background:rgba(92,108,150,.1); color:var(--ok); }
.cp-badge.draft { background:rgba(168,97,92,.1); color:var(--warn,#A8615C); }
.cp-badge.superseded { background:rgba(92,108,150,.1); color:var(--muted); }
.cp-version { font-size:10px; color:var(--muted); }
.cp-steps-count { font-size:11px; color:var(--muted); }
/* ── Light theme card footer override ── */
html[data-theme="light"] .cp-meta-title { color:var(--ink,#181819); }
html[data-theme="light"] .cp-badge.published { background:rgba(92,108,150,.1); color:#6E8F6B; }
html[data-theme="light"] .cp-badge.draft { background:rgba(168,97,92,.1); color:#78621c; }
html[data-theme="light"] .cp-badge.superseded { background:rgba(200,200,200,.15); color:#777; }
/* ══ Split-panel overlay ══ */
.cp-overlay {
position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
display:none; align-items:center; justify-content:center; z-index:1000;
}
.cp-overlay.open { display:flex; }
.cp-split {
width:92vw; max-width:1200px; height:85vh;
background:var(--aryvor-surface, #0D0D0C); border:1px solid var(--aryvor-border, #2E2E2A);
border-radius:0; display:grid; grid-template-columns:1fr 1fr;
overflow:hidden; box-shadow:none;
}
/* ── Left panel: editable checks ── */
.cp-left { display:flex; flex-direction:column; border-right:1px solid var(--aryvor-border, #2E2E2A); overflow:hidden; }
.cp-left-hd {
padding:18px 20px; border-bottom:1px solid var(--aryvor-border, #2E2E2A);
display:flex; align-items:flex-start; justify-content:space-between;
}
.cp-left-hd h2 { font-size:17px; font-weight:600; color:var(--ink); }
.cp-left-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.cp-ver-strip { display:flex; align-items:center; gap:8px; margin-top:6px; }
.cp-close {
background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer;
padding:4px 8px; border-radius:0;
}
.cp-close:hover { background:var(--aryvor-surface, #0D0D0C); color:var(--ink); }
/* ── Check items list ── */
.cp-checks {
flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:6px;
}
.cp-chk-item {
display:grid; grid-template-columns:32px 1fr 90px 36px;
align-items:center; gap:8px; padding:10px 12px;
background:var(--aryvor-bg,rgba(15,17,28,.38)); border:1px solid var(--aryvor-border, #2E2E2A);
border-radius:0; transition:border-color .15s;
}
.cp-chk-item:hover { border-color:var(--aryvor-primary, #8496C2); }
.cp-chk-ord {
width:26px; height:26px; background:rgba(92,108,150,.12); color:var(--aryvor-primary,#5C6C96);
border-radius:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.cp-chk-body { min-width:0; }
.cp-chk-title {
width:100%; background:none; border:none; color:var(--ink);
font-size:13px; font-weight:500; padding:2px 0; outline:none;
}
.cp-chk-title:focus { border-bottom:1px solid var(--aryvor-primary, #8496C2); }
.cp-chk-accept {
font-size:11px; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:6px;
}
.cp-chk-accept input {
background:none; border:none; border-bottom:1px dashed var(--aryvor-border, #2E2E2A);
color:var(--ink); font-size:11px; flex:1; padding:1px 0; outline:none;
}
.cp-chk-accept input:focus { border-bottom-color:var(--aryvor-primary, #8496C2); }
.cp-chk-req {
font-size:10px; font-weight:500; padding:3px 8px; border-radius:0; text-align:center;
}
.cp-chk-req.required { background:rgba(92,108,150,.12); color:var(--aryvor-primary,#5C6C96); }
.cp-chk-req.optional { background:rgba(92,108,150,.1); color:var(--muted); }
.cp-chk-ev { display:flex; gap:4px; margin-top:4px; }
.cp-chk-ev-ico {
width:24px; height:24px; border-radius:0; display:flex; align-items:center; justify-content:center;
font-size:12px; cursor:pointer; transition:background .15s;
}
.cp-chk-ev-ico.active { background:rgba(92,108,150,.12); color:var(--aryvor-primary,#5C6C96); }
.cp-chk-ev-ico:not(.active) { background:var(--aryvor-surface, #0D0D0C); color:var(--muted); }
.cp-chk-del {
background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer;
border-radius:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
}
.cp-chk-del:hover { background:rgba(168,97,92,.1); color:var(--critical); }
.cp-add-step {
display:flex; align-items:center; gap:6px; justify-content:center;
padding:10px; border-radius:0; border:1px dashed var(--aryvor-border, #2E2E2A);
background:none; color:var(--muted); font-size:13px; cursor:pointer; transition:all .15s;
}
.cp-add-step:hover { border-color:var(--aryvor-primary, #8496C2); color:var(--aryvor-primary,#5C6C96); background:rgba(92,108,150,.06); }
/* ── Panel footer ── */
.cp-left-ft {
padding:12px 20px; border-top:1px solid var(--aryvor-border, #2E2E2A);
display:flex; justify-content:flex-end; gap:8px;
}
.cp-btn-sec {
padding:7px 16px; border-radius:0; border:1px solid var(--aryvor-border, #2E2E2A);
background:var(--aryvor-surface, #0D0D0C); color:var(--muted); font-size:13px; cursor:pointer;
}
.cp-btn-sec:hover { border-color:var(--aryvor-primary, #8496C2); color:var(--ink); }
.cp-btn-pri {
padding:7px 18px; border-radius:0; border:none;
background:var(--aryvor-primary,#5C6C96); color:#fff; font-size:13px; font-weight:600; cursor:pointer;
}
.cp-btn-pri:hover { filter:brightness(1.08); }
/* ── Right panel: A4 PDF preview ── */
.cp-right {
background:rgba(0,0,0,.15); display:flex; flex-direction:column;
align-items:center; overflow-y:auto; padding:24px;
}
.cp-right-label {
font-size:11px; text-transform:uppercase; letter-spacing:.6px;
color:var(--muted); margin-bottom:12px; align-self:flex-start;
}
.cp-a4 {
width:100%; max-width:520px; background:#fff; border-radius:0;
box-shadow:none; padding:36px 32px 28px; color:#141413; font-size:11px;
overflow:hidden;
}
.cp-a4-hd {
display:flex; justify-content:space-between; align-items:center;
border-bottom:2px solid var(--aryvor-primary,#5C6C96); padding-bottom:12px; margin-bottom:14px;
gap:10px;
}
.cp-a4-brand { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.cp-a4-client { display:flex; align-items:center; gap:8px; flex:1; min-width:0; justify-content:flex-end; }
.cp-a4-company-logo { width:36px; height:36px; border-radius:0; object-fit:contain; }
.cp-a4-logo-fallback {
width:36px; height:36px; border-radius:0;
background:var(--aryvor-primary,#5C6C96); display:flex; align-items:center; justify-content:center;
font-weight:800; color:#fff; font-size:12px; flex-shrink:0;
}
.cp-a4-brand-text { font-size:13px; font-weight:700; color:#141413; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-a4-brand-sub { font-size:9px; color:#6E6D66; }
.cp-a4-info-center { text-align:center; font-size:10px; color:#6E6D66; flex-shrink:0; }
.cp-a4-info-center strong { display:block; font-size:12px; color:#141413; }
.cp-a4-info-center span { display:block; }
.cp-a4-title-block {
background:#F7F6F1; border:1px solid #F7F6F1; border-radius:0; padding:12px 14px; margin-bottom:14px;
}
.cp-a4-title { font-size:15px; font-weight:700; color:#141413; }
.cp-a4-scope { font-size:10px; color:#6E6D66; margin-top:3px; }
.cp-a4-meta {
display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:14px;
}
.cp-a4-meta-item { font-size:10px; }
.cp-a4-meta-item .label { color:#8496C2; text-transform:uppercase; font-size:8px; letter-spacing:.4px; }
.cp-a4-meta-item .value { font-weight:600; color:#141413; margin-top:1px; }
.cp-a4-tbl { width:100%; table-layout:fixed; border-collapse:collapse; font-size:10px; margin-bottom:16px; }
.cp-a4-tbl thead th {
text-align:left; padding:7px 8px;
background:var(--aryvor-primary,#5C6C96); color:#fff;
font-size:9px; text-transform:uppercase; letter-spacing:.4px; font-weight:600;
word-wrap:break-word; overflow-wrap:break-word;
}
.cp-a4-tbl thead th:first-child { border-radius:0; }
.cp-a4-tbl thead th:last-child { border-radius:0; }
.cp-a4-tbl tbody td { padding:8px; border-bottom:1px solid #F7F6F1; vertical-align:top; word-wrap:break-word; overflow-wrap:break-word; }
.cp-a4-tbl tbody tr:nth-child(even) td { background:#faf9ff; }
.cp-a4-tbl .step-num { font-weight:700; color:var(--aryvor-primary,#5C6C96); text-align:center; width:24px; }
.cp-a4-tbl .chk-col { width:34px; text-align:center; }
.cp-a4-checkbox { width:14px; height:14px; border:1.5px solid #bbb; border-radius:0; display:inline-block; }
.cp-a4-tbl .ev-col { width:15%; font-size:9px; color:#6E6D66; }
.cp-a4-sig { margin-top:16px; padding-top:12px; border-top:1px dashed #E3E0D5; }
.cp-a4-sig-title { font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:#6E6D66; margin-bottom:10px; font-weight:600; }
.cp-a4-sig-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.cp-a4-sig-box { text-align:center; }
.cp-a4-sig-ln { border-bottom:1px solid #E3E0D5; height:28px; margin-bottom:4px; }
.cp-a4-sig-lbl { font-size:8px; color:#8496C2; text-transform:uppercase; }
.cp-a4-footer {
margin-top:16px; padding-top:8px; border-top:1px solid #F7F6F1;
display:flex; justify-content:space-between; align-items:center; font-size:8px; color:#8496C2;
}
.cp-a4-footer-logo { display:flex; align-items:center; gap:4px; }
.cp-a4-footer-logo img { width:12px; height:12px; border-radius:0; object-fit:contain; }
/* ── Light theme panel overrides ── */
html[data-theme="light"] .cp-doc-card { background:#fff; border-color:#E3E0D5; }
html[data-theme="light"] .cp-doc-card:hover { border-color:var(--aryvor-primary,#5C6C96); box-shadow:none; }
html[data-theme="light"] .cp-split { background:#fff; border-color:#E3E0D5; }
html[data-theme="light"] .cp-left { border-right-color:#E3E0D5; }
html[data-theme="light"] .cp-left-hd { border-bottom-color:#E3E0D5; }
html[data-theme="light"] .cp-left-ft { border-top-color:#E3E0D5; }
html[data-theme="light"] .cp-chk-item { background:#f7f7fb; border-color:#E3E0D5; }
html[data-theme="light"] .cp-chk-item:hover { border-color:var(--aryvor-primary,#5C6C96); }
html[data-theme="light"] .cp-right { background:#f0eff7; }
/* ── Responsive ── */
@media (max-width:900px) {
.cp-split { grid-template-columns:1fr; height:92vh; }
.cp-right { display:none; }
.cp-gallery { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
}
@media (max-width:600px) {
.cp-gallery { grid-template-columns:1fr 1fr; gap:10px; }
.cp-chk-item { grid-template-columns:28px 1fr; }
.cp-chk-item > :nth-child(3), .cp-chk-item > :nth-child(4) { grid-column:2; }
}
/* ══════════════════════════════════════════════════════════════════════════════
Collapsible operational toolbar
══════════════════════════════════════════════════════════════════════════════ */
.ops-toolbar-collapsible {
overflow:hidden; transition:max-height .3s ease, opacity .2s ease; max-height:600px; opacity:1;
}
.ops-toolbar-collapsible.collapsed {
max-height:0; opacity:0; pointer-events:none;
}
.ops-toolbar-toggle {
background:none; border:1px solid var(--aryvor-border,#1C1C1A); color:var(--muted,#5C6C96);
width:28px; height:28px; border-radius:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
transition:background .15s, color .15s, transform .15s;
}
.ops-toolbar-toggle:hover { background:var(--aryvor-surface,#141413); color:var(--ink,#F7F6F1); }
.ops-toolbar-chevron {
display:inline-block; transition:transform .25s ease; font-size:16px; line-height:1; transform:rotate(-90deg);
}
.ops-toolbar-toggle.open .ops-toolbar-chevron { transform:rotate(90deg); }
html[data-theme="light"] .ops-toolbar-toggle { border-color:#E3E0D5; }
html[data-theme="light"] .ops-toolbar-toggle:hover { background:#f5f5f3; }
/* ══════════════════════════════════════════════════════════════════════════════
Equipment Mapping — eqm- prefix
══════════════════════════════════════════════════════════════════════════════ */
.eqm-alert {
background:rgba(var(--warn-rgb,221,160,60),.12); border:1px solid var(--warn,#A8615C);
border-radius:0; padding:10px 16px; margin:0 0 16px; font-size:13px; color:var(--warn,#A8615C);
}
.eqm-section { margin-bottom:24px; }
.eqm-section h3 { font-size:15px; font-weight:600; margin:0 0 4px; color:var(--ink,#F7F6F1); }
.eqm-hint { font-size:12px; color:var(--muted,#5C6C96); margin:0 0 12px; }
.eqm-section-header { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.eqm-section-header h3 { margin:0; }
/* Type grid */
.eqm-type-grid { display:flex; flex-direction:column; gap:1px; background:var(--aryvor-border,#1C1C1A); border-radius:0; overflow:hidden; border:1px solid var(--aryvor-border,#1C1C1A); }
.eqm-type-header { display:grid; grid-template-columns:180px 140px 1fr 200px; gap:0; padding:8px 14px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#5C6C96); background:var(--aryvor-surface,#141413); }
.eqm-type-row { display:grid; grid-template-columns:180px 140px 1fr 200px; gap:0; padding:10px 14px; align-items:center; background:var(--aryvor-bg,#0D0D0C); transition:background .15s; }
.eqm-type-row:hover { background:var(--aryvor-surface,#141413); }
.eqm-type-info strong { font-size:13px; display:block; color:var(--ink,#F7F6F1); }
.eqm-type-info small { font-size:11px; color:var(--muted,#5C6C96); }
/* Toggle switches */
.eqm-toggles { display:flex; gap:14px; align-items:center; }
.eqm-toggle-label { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted,#5C6C96); }
.eqm-switch { position:relative; display:inline-block; width:34px; height:18px; flex-shrink:0; }
.eqm-switch input { opacity:0; width:0; height:0; position:absolute; }
.eqm-slider { position:absolute; cursor:pointer; inset:0; background:#3E3E39; border-radius:0; transition:background .2s; }
.eqm-slider::before { content:""; position:absolute; width:14px; height:14px; left:2px; bottom:2px; background:#888; border-radius:0; transition:transform .2s,background .2s; }
.eqm-switch input:checked + .eqm-slider { background:var(--aryvor-primary,#5C6C96); }
.eqm-switch input:checked + .eqm-slider::before { transform:translateX(16px); background:#fff; }
/* Alias chips */
.eqm-aliases { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.eqm-alias-chip { display:inline-flex; align-items:center; gap:2px; padding:2px 8px; font-size:11px; border-radius:0; background:var(--aryvor-surface,#141413); border:1px solid var(--aryvor-border,#1C1C1A); color:var(--ink,#F7F6F1); }
.eqm-alias-x { background:none; border:none; color:var(--muted,#5C6C96); cursor:pointer; font-size:13px; padding:0 1px; line-height:1; }
.eqm-alias-x:hover { color:var(--critical,#f06); }
.eqm-add-alias { background:none; border:1px dashed var(--aryvor-border,#1C1C1A); color:var(--aryvor-primary,#5C6C96); cursor:pointer; width:22px; height:22px; border-radius:0; font-size:14px; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.eqm-add-alias:hover { border-color:var(--aryvor-primary,#5C6C96); background:rgba(92,108,150,.1); }
/* Plan badges */
.eqm-plan-link { display:flex; flex-direction:column; gap:3px; }
.eqm-plan-slot { display:flex; align-items:center; gap:6px; }
.eqm-plan-label { font-size:11px; font-weight:600; color:var(--muted,#5C6C96); min-width:46px; }
.eqm-plan-badge { font-size:11px; padding:1px 8px; border-radius:0; }
.eqm-plan-badge.linked { background:rgba(92,108,150,.12); color:var(--ok,#6E8F6B); }
.eqm-plan-badge.none { background:rgba(var(--warn-rgb,221,160,60),.1); color:var(--warn,#A8615C); font-style:italic; }
.eqm-plan-badge small { font-size:10px; opacity:.7; margin-left:2px; }
/* Assign select in unmatched table */
.eqm-assign-select { padding:4px 8px; font-size:12px; border-radius:0; border:1px solid var(--aryvor-border,#1C1C1A); background:var(--aryvor-surface,#141413); color:var(--ink,#F7F6F1); }
.eqm-table { margin-top:8px; }
/* ── Light theme ── */
html[data-theme="light"] .eqm-type-grid { background:#E3E0D5; border-color:#E3E0D5; }
html[data-theme="light"] .eqm-type-header { background:#f5f5f3; }
html[data-theme="light"] .eqm-type-row { background:#fff; }
html[data-theme="light"] .eqm-type-row:hover { background:#f9f9f7; }
html[data-theme="light"] .eqm-alias-chip { background:#f5f5f3; border-color:#E3E0D5; }
html[data-theme="light"] .eqm-slider { background:#ccc; }
html[data-theme="light"] .eqm-assign-select { background:#fff; border-color:#E3E0D5; color:#222; }
/* ── Responsive ── */
@media (max-width:900px) {
.eqm-type-header { display:none; }
.eqm-type-row { grid-template-columns:1fr; gap:8px; padding:12px 14px; }
.eqm-plan-link { flex-direction:row; gap:12px; }
}
/* ══════════════════════════════════════════════════════════════════════════════
SharePoint drawing links
══════════════════════════════════════════════════════════════════════════════ */
.sp-config-hint { display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:0; background:rgba(92,108,150,.08); border:1px dashed var(--aryvor-primary,#5C6C96); font-size:13px; color:var(--muted); margin-bottom:12px; }
.sp-drawing-link { display:inline-flex; align-items:center; gap:4px; text-decoration:none; white-space:nowrap; }
.sp-drawing-link:hover { background:rgba(92,108,150,.15); border-color:var(--aryvor-primary,#5C6C96); }
.field-drawings-subhead { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.field-drawings-subhead:first-child { margin-top: 0; }
.field-drawing-card {
display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:0;
background:rgba(92,108,150,.08); border:1px solid var(--aryvor-primary,#5C6C96);
text-decoration:none; color:var(--ink,#F7F6F1); transition:background .15s;
width:100%; text-align:left; font:inherit; cursor:pointer;
}
.field-drawing-card:hover { background:rgba(92,108,150,.18); }
.field-drawing-card .drawing-icon { font-size:28px; flex-shrink:0; }
.field-drawing-card .drawing-info { display:flex; flex-direction:column; gap:2px; }
.field-drawing-card .drawing-info strong { font-size:14px; }
.field-drawing-card .drawing-info small { font-size:12px; color:var(--muted,#5C6C96); }
html[data-theme="light"] .field-drawing-card { background:rgba(92,108,150,.06); }
html[data-theme="light"] .field-drawing-card:hover { background:rgba(92,108,150,.14); }
.field-drawing-card.is-disabled { opacity:.55; cursor:default; }
.field-drawing-open { display:flex; align-items:center; gap:12px; flex:1; min-width:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.field-drawing-offline-btn { flex-shrink:0; min-height:32px; padding:0 10px; font-size:11px; }
.field-drawing-offline-btn.is-cached { color:var(--ok); border-color:var(--ok); cursor:default; }
/* QR print drawing checkbox */
.qr-print-option-row { display:flex; align-items:center; gap:8px; padding:8px 0; font-size:13px; color:var(--ink,#F7F6F1); }
.qr-print-option-row input[type="checkbox"] { accent-color:var(--aryvor-primary,#5C6C96); }
/* ── Weight categories settings ── */
/* ── Productivity weight settings (full-page layout) ── */
.modal:has(.wc-settings) { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.wc-settings { display: flex; flex-direction: column; gap: 0; }
/* Section dividers */
.wc-divider { border: none; border-top: 1px solid var(--border, rgba(255,255,255,.08)); margin: 36px 0; }
/* Section header */
.wc-section-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.2px; }
.wc-section-desc { font-size: 13px; color: var(--muted); margin-bottom: 16px; line-height: 1.5; max-width: 640px; }
/* Activity type sub-section */
.wc-type-block { margin-bottom: 28px; }
.wc-type-header { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.wc-type-hint { font-size: 12px; color: var(--aryvor-primary, #5C6C96); padding: 8px 12px; background: var(--surface-alt, rgba(92,108,150,.06)); margin-bottom: 10px; line-height: 1.5; }
/* Tables */
.wc-table-wrap { overflow-x: auto; border: 1px solid var(--border, rgba(255,255,255,.08)); margin-bottom: 4px; }
.wc-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.wc-table thead { background: var(--surface-alt, rgba(255,255,255,.03)); }
.wc-table th { font-weight: 600; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); white-space: nowrap; }
.wc-table td { padding: 8px 14px; border-bottom: 1px solid var(--line, rgba(255,255,255,.04)); color: var(--muted); vertical-align: middle; }
.wc-table tr:last-child td { border-bottom: none; }
.wc-table td:first-child { color: var(--ink); font-weight: 500; }
.wc-table td.wc-td-hint { font-size: 12px; color: var(--muted); }
.wc-table .wc-weight-input { width: 76px; min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; padding: 4px 8px; font-size: 13px; background: var(--surface-alt, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08)); color: var(--ink); }
.wc-table .wc-weight-input:disabled { opacity: .5; cursor: not-allowed; }
/* Callout blocks (formula / info) */
.wc-callout { background: var(--surface-alt, rgba(92,108,150,.06)); border-left: 3px solid var(--aryvor-primary, #5C6C96); padding: 12px 16px; margin: 16px 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.wc-callout strong { color: var(--ink); }
.wc-callout-warm { border-left-color: #B99B57; }
.wc-formula-block { background: var(--bg, #000); border: 1px solid var(--border, rgba(255,255,255,.08)); padding: 14px 18px; margin: 16px 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 2; color: var(--ink); overflow-x: auto; }
.wc-formula-block .wc-hl { color: var(--aryvor-primary, #5C6C96); font-weight: 500; }
.wc-formula-block .wc-cm { color: var(--muted); font-style: italic; }
/* Environment multiplier rows */
.wc-env-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line, rgba(255,255,255,.04)); }
.wc-env-row:last-child { border-bottom: none; }
.wc-env-label { flex: 1; font-size: 13px; font-weight: 500; color: var(--ink); }
.wc-env-prefix { font-size: 14px; font-weight: 600; color: var(--muted); }
.wc-env-input { width: 70px; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; padding: 4px 8px; font-size: 13px; background: var(--surface-alt, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08)); color: var(--ink); }
/* Productivity index section */
.wc-idx-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.04)); }
.wc-idx-row:last-child { border-bottom: none; }
.wc-idx-info { flex: 1; min-width: 0; }
.wc-idx-info strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.wc-idx-info small { display: block; font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: 1px; }
.wc-idx-input { width: 80px; min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; padding: 4px 8px; font-size: 13px; background: var(--surface-alt, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08)); color: var(--ink); }
.wc-idx-unit { font-size: 13px; font-weight: 600; color: var(--muted); }
.wc-readonly { font-size: 13px; color: var(--muted); padding: 12px; background: var(--surface-alt, rgba(92,108,150,.06)); text-align: center; }
@media (max-width: 540px) {
.wc-env-row, .wc-idx-row { flex-wrap: wrap; }
.wc-env-label, .wc-idx-info { flex: 1 1 100%; }
}
/* Mobile foundation — final cascade authority. */
.mobile-nav-backdrop { display:none; }
@media (max-width: 760px) {
html, body { width:100%; min-height:100%; overflow:hidden; overscroll-behavior:none; }
body { min-width:0; -webkit-text-size-adjust:100%; }
.shell,
.shell.sidebar-collapsed {
display:block;
width:100%;
height:100vh;
height:100dvh;
min-height:0;
overflow:hidden;
}
.workspace {
width:100%;
height:100vh;
height:100dvh;
min-width:0;
overflow-x:hidden;
overflow-y:auto;
padding:0 0 env(safe-area-inset-bottom);
-webkit-overflow-scrolling:touch;
overscroll-behavior-y:contain;
}
.rail { display:none !important; }
.sidebar {
position:fixed;
z-index:1002;
inset:0 auto 0 0;
width:min(320px,88vw);
height:100vh;
height:100dvh;
padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));
overflow-y:auto;
transform:translateX(-105%);
opacity:0;
pointer-events:none;
box-shadow:18px 0 48px rgba(0,0,0,.42);
}
.shell.sidebar-open .sidebar { transform:translateX(0); opacity:1; pointer-events:auto; }
.shell.sidebar-open .workspace { overflow:hidden; }
.mobile-nav-backdrop {
position:fixed;
z-index:1001;
inset:0;
display:block;
width:100%;
height:100%;
padding:0;
border:0;
background:rgba(0,0,0,.58);
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
}
.shell.sidebar-open .mobile-nav-backdrop { opacity:1; pointer-events:auto; }
.topbar {
position:sticky;
z-index:60;
top:0;
display:grid;
grid-template-columns:minmax(0,1fr);
gap:8px;
min-height:0;
padding:max(8px,env(safe-area-inset-top)) 12px 9px !important;
border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--aryvor-bg) 94%,transparent) !important;
backdrop-filter:blur(14px);
}
.top-actions {
grid-row:1;
display:flex;
justify-content:flex-end;
gap:7px;
min-width:0;
overflow-x:auto;
scrollbar-width:none;
}
.top-actions::-webkit-scrollbar { display:none; }
.top-role { display:none !important; }
.search { grid-row:2; width:100% !important; min-width:0; height:44px !important; }
.mobile-menu { display:grid !important; order:-1; }
.top-actions :is(button,select,.avatar,.theme-toggle,.global-alert-button) {
flex:0 0 auto;
min-width:44px !important;
width:44px !important;
height:44px !important;
min-height:44px !important;
}
.top-actions select { width:auto !important; min-width:62px !important; padding-inline:9px 24px; }
.panel { width:100%; min-width:0; padding:10px 10px calc(24px + env(safe-area-inset-bottom)) !important; }
.hero-grid,.hero-grid.compact { width:100%; margin-top:0 !important; padding:14px !important; }
.hero-copy { min-width:0; padding-right:0; }
.hero-copy h1 { overflow-wrap:anywhere; font-size:clamp(24px,8vw,34px); }
.hero-title-row { align-items:flex-start; }
.hero-title-row .view-help,.hero-grid > .view-help { position:static !important; justify-self:start; margin:8px 0 0 !important; }
.hero-controls { display:grid; grid-template-columns:1fr; width:100%; gap:8px; }
.hero-controls :is(select,button,label) { width:100%; min-width:0; min-height:44px; }
.metric-line { flex-wrap:wrap; }
.kpis,.workflow-kpis { grid-template-columns:1fr !important; }
body[data-view="dashboard"] .kpi-card { min-height:96px; grid-template-columns:64px minmax(0,1fr); }
body[data-view="dashboard"] .kpi-card strong { width:56px; height:56px; }
.split-view,.lower-grid { display:grid; grid-template-columns:minmax(0,1fr) !important; width:100%; min-width:0; }
.module,.module.accent,#primaryModule,#sideModule:not(:empty) { min-width:0; padding:14px !important; }
.module-header,.production-register-header,.record-management-bar,.panel-toolbar {
align-items:stretch !important;
flex-direction:column !important;
gap:10px;
}
.module-header > :is(button,.primary-action),.record-management-actions { width:100%; }
.record-management-actions { flex-wrap:wrap; }
.record-management-actions > * { flex:1 1 140px; min-height:44px !important; }
:is(button,.filter-btn,.primary-action,.cadm-btn-primary,.cadm-btn-secondary,.icon-action):not(.mobile-nav-backdrop) { min-height:44px; }
:is(input,select,textarea,.settings-select,.cadm-input) { max-width:100%; min-height:44px; font-size:16px; }
.table-wrap,.quality-table-wrap,.wf-table-wrap,.mat-table-wrap {
width:100%;
max-width:100%;
overflow:auto !important;
scroll-snap-type:x proximity;
overscroll-behavior-x:contain;
}
:is(.workflow-table,.ops-table,.wf-table,.mat-table) { min-width:720px; }
table :is(th,td) { scroll-snap-align:start; }
.operational-quick-filters,.v3-tabs,.mat-tabs,.qhse-tabs,.users-tabs,.wf-firm-tabs {
width:100%;
overflow-x:auto;
flex-wrap:nowrap !important;
-webkit-overflow-scrolling:touch;
}
body[data-view="installations"] .installation-toolbar { display:grid !important; grid-template-columns:1fr !important; }
body[data-view="installations"] .installation-toolbar > label,
body[data-view="installations"] .installation-toolbar > .filter-result-control { width:100% !important; min-width:0 !important; margin:0 !important; }
.opi-filter-bar { grid-template-columns:1fr !important; }
.opi-search-field { grid-column:auto; }
.opi-selection-bar,.opi-page-actions { align-items:stretch; flex-direction:column; }
.opi-page-actions > button { width:100%; }
.modal,
.modal:has(.punch-form-modal),
.modal:has(.mail-composer),
.modal:has(.qc-modal-v2),
.modal:has(.checklist-execution-modal),
.modal:has(.panel-overview-modal),
.modal:has(.operational-record-form),
.modal:has(.qhse-form),
.modal:has(.wc-settings) {
inset:0;
width:100vw !important;
max-width:none !important;
height:100vh;
height:100dvh;
max-height:none !important;
margin:0;
padding:0;
border:0;
overflow:auto;
}
.modal-head {
position:sticky;
z-index:5;
top:0;
min-height:58px;
margin:0 !important;
padding:max(9px,env(safe-area-inset-top)) 12px 9px !important;
background:var(--aryvor-bg) !important;
}
.modal-head .icon-btn { flex:0 0 44px; }
.modal #modalBody { min-width:0; padding:12px; }
.login-overlay,.commessa-overlay,.cadm-overlay { overflow:auto; padding:max(68px,calc(env(safe-area-inset-top) + 58px)) 12px max(18px,env(safe-area-inset-bottom)); }
.login-card { width:100%; max-width:420px; min-height:0; margin:auto; padding:24px 18px; }
.login-global-controls { top:max(10px,env(safe-area-inset-top)); right:10px; }
.login-global-controls :is(button,select) { min-height:44px; }
.cadm-dialog,.user-registry-dialog,.cadm-project-dialog { width:100% !important; max-width:none !important; max-height:none !important; }
.pdf-preview-overlay { height:100dvh; }
}
@media (max-width: 380px) {
.top-actions { justify-content:flex-start; }
.panel { padding-inline:8px !important; }
.hero-grid,.module,#primaryModule { padding-inline:12px !important; }
.login-card { padding-inline:16px; }
}
@media (hover:none) and (pointer:coarse) {
button,a,[data-action],select,input[type="checkbox"],input[type="radio"] { touch-action:manipulation; }
button:hover,.filter-btn:hover,.primary-action:hover { transform:none !important; }
}
/* QC / Energization operational readiness summary */
.qc-execution-summary { margin:14px 0; padding:14px; border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 92%,var(--accent) 8%); }
.qc-execution-summary>header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:12px; }
.qc-execution-summary>header strong,.qc-execution-group>strong { display:block; }
.qc-execution-summary>header small,.qc-execution-group>strong small { color:var(--muted); margin-left:7px; font-weight:500; }
.qc-execution-legend,.qc-execution-group>div { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.qc-execution-legend span,.qc-execution-dot { display:inline-flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; }
.qc-execution-legend i,.qc-execution-dot i { width:10px; height:10px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 2px color-mix(in srgb,var(--muted) 20%,transparent); }
.qc-execution-legend .done i,.qc-execution-dot.done i { background:var(--ok); box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 22%,transparent); }
.qc-execution-legend .missing i,.qc-execution-dot.missing i { background:var(--critical); box-shadow:0 0 0 2px color-mix(in srgb,var(--critical) 22%,transparent); }
.qc-execution-legend .na i,.qc-execution-dot.na i { background:#8b93a5; box-shadow:0 0 0 2px rgba(139,147,165,.22); }
.qc-execution-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.qc-execution-group { min-width:0; padding:11px; border:1px solid var(--line); background:var(--panel); }
.qc-execution-group>strong { margin-bottom:8px; font-size:13px; }
.qc-execution-group>small { display:block; margin-top:8px; color:var(--muted); line-height:1.45; }
.qc-all-cable-details { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.qc-all-cable-details>summary,.qc-cable-detail>summary { cursor:pointer; color:var(--accent); font-weight:650; }
.qc-cable-detail { margin-top:8px; padding:9px 11px; border:1px solid var(--line); background:var(--panel); }
.qc-cable-detail>summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; color:inherit; }
.qc-cable-identity { display:grid; gap:2px; min-width:min(290px,100%); margin-right:auto; }
.qc-cable-identity small { color:var(--muted); font-size:11px; font-weight:500; overflow-wrap:anywhere; }
.qc-cable-detail>summary>span:not(.qc-execution-dot) { color:var(--muted); font-size:12px; }
.qc-cable-trace { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-top:10px; }
.qc-cable-trace>div { padding:8px; background:color-mix(in srgb,var(--panel) 86%,var(--accent) 14%); }
.qc-cable-trace span,.qc-cable-trace small { display:block; color:var(--muted); font-size:11px; }
.qc-cable-trace strong { display:block; margin:3px 0; font-size:12px; overflow-wrap:anywhere; }
.qc-no-cables { margin:10px 0 0; color:var(--muted); font-size:12px; }
@media (max-width: 760px) {
.qc-execution-summary>header { display:block; }
.qc-execution-legend { margin-top:8px; }
.qc-execution-overview { grid-template-columns:1fr; }
.qc-cable-trace { grid-template-columns:1fr 1fr; }
}
/* ── FES · Kit digitale di lavorazione & Distinta magazzino ─────── */
.fes-kit-panel .fes-bom-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.fes-doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:12px; }
.fes-doc-card { border:1px solid var(--line); border-radius:0; background:var(--surface); }
.fes-doc-open { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; padding:12px; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.fes-doc-open strong { word-break:break-word; }
.fes-doc-open small { color:var(--muted); }
.fes-doc-icon { font-size:20px; }
.tech-doc-card { position:relative; }
.tech-doc-delete { position:absolute; top:4px; right:4px; }
.tech-doc-pending { display:flex; flex-direction:column; gap:8px; margin-top:8px; padding:12px; border:1px solid var(--line); background:var(--surface); }
.tech-doc-pending-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tech-doc-pending-name { flex:1 1 200px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:12px; }
.tech-doc-pending-row select { flex:1 1 220px; }
.mat-reel-block-head { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.mat-reel-block-head > strong { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.fes-bom-table td small { display:block; margin-top:2px; color:var(--muted); }
tr.fes-critical-row td, .fes-bom-table tr.fes-critical-row td { background:color-mix(in srgb, var(--aryvor-danger, #A8615C) 12%, transparent); }
.fes-template-rows { display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.fes-template-row { display:grid; grid-template-columns:1fr 1.6fr .8fr .6fr 1fr 1fr auto; gap:8px; align-items:center; }
.fes-template-row input { min-width:0; }
.fes-critical-check { display:flex; align-items:center; gap:6px; font-size:12px; }
.fes-warehouse-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; margin-bottom:16px; }
.fes-reel-section { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-top:12px; }
.fes-reel-warning { color:var(--aryvor-danger,#A8615C); }
.fes-tip-list { display:flex; flex-direction:column; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); }
.fes-tip-card { padding:10px 12px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0; background:var(--surface); }
.fes-tip-card.fes-tip-obbligatorio { border-left-color:var(--aryvor-danger,#A8615C); background:color-mix(in srgb, var(--aryvor-danger,#A8615C) 8%, var(--surface)); }
.fes-tip-card.fes-tip-consigliato { border-left-color:var(--aryvor-warning,#B99B57); }
.fes-tip-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.fes-tip-badge { font-size:9px; text-transform:uppercase; letter-spacing:.06em; padding:2px 6px; border:1px solid var(--line); color:var(--muted); }
.fes-tip-body { font-size:13px; color:var(--ink); white-space:pre-line; }
.fes-tip-topics { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
.fes-tip-topic-chip { padding:2px 7px; border:1px solid var(--line); border-radius:0; background:color-mix(in srgb, var(--accent) 10%, var(--surface)); color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.fes-tip-value-table { width:100%; margin-top:8px; border-collapse:collapse; font-size:12px; }
.fes-tip-value-table th, .fes-tip-value-table td { padding:5px 8px; border:1px solid var(--line); text-align:left; }
.fes-tip-value-table th { background:var(--panel); color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.fes-tip-photos { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.fes-tip-photo { width:84px; height:84px; padding:0; border:1px solid var(--line); background:var(--panel); overflow:hidden; cursor:pointer; }
.fes-tip-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.fes-tip-photo-broken { display:none; }
.fes-tip-media { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.fes-tip-media-item { padding:4px 8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:12px; cursor:pointer; }
.fes-tip-ack { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; }
.fes-tip-manage-btn { align-self:flex-start; }
.fes-tip-manager { display:flex; flex-direction:column; gap:12px; min-width:420px; }
.fes-tip-manager-list { display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow-y:auto; }
.fes-tip-manager-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--line); }
.fes-tip-manager-row small { display:block; color:var(--muted); }
.fes-tip-scope-badge { display:inline-block; margin-right:6px; padding:1px 6px; font-size:9px; text-transform:uppercase; border:1px solid var(--line); color:var(--muted); }
.fes-tip-media-chip { display:inline-block; margin:4px 6px 0 0; padding:2px 8px; border:1px solid var(--line); font-size:11px; color:var(--muted); }
.fes-team-kit { margin-bottom:22px; }
.fes-team-kit h3 { display:flex; align-items:baseline; gap:8px; margin:0 0 8px; }
.fes-team-kit h3 small { color:var(--muted); font-weight:400; }
.fes-catalog-chip { display:inline-block; padding:1px 6px; font-size:9px; text-transform:uppercase; letter-spacing:.04em; border:1px solid var(--ok); border-radius:0; color:var(--ok); vertical-align:middle; }
.fes-material-custom-field[hidden], .fes-material-catalog-field[hidden] { display:none; }
.fes-material-picker { display:flex; flex-direction:column; gap:6px; }
.fes-material-picker-filters { display:flex; gap:8px; flex-wrap:wrap; }
.fes-material-search { flex:1 1 220px; min-width:180px; padding:6px 10px; border:1px solid var(--line); border-radius:0; font-size:13px; background:white; }
.fes-material-category-filter { flex:0 0 auto; padding:6px 10px; border:1px solid var(--line); border-radius:0; font-size:13px; background:white; }
.fes-material-select { width:100%; border:1px solid var(--line); border-radius:0; font-size:13px; background:white; padding:2px; }
.fes-material-select option { padding:5px 8px; }
.fes-material-select option[hidden] { display:none; }
.fes-material-picker-empty { color:var(--muted); font-style:italic; }
.fes-material-picker-empty[hidden] { display:none; }
.fes-kit-status { display:inline-block; padding:2px 8px; font-size:10px; text-transform:uppercase; letter-spacing:.04em; border:1px solid var(--line); color:var(--muted); }
.fes-kit-status-pending { border-color:var(--aryvor-warning,#B99B57); color:var(--aryvor-warning,#B99B57); }
.fes-kit-status-ready { border-color:var(--blue,#5C6C96); color:var(--blue,#5C6C96); }
.fes-kit-status-picked-up { border-color:var(--ok); color:var(--ok); }
.fes-kit-status-actions { display:flex; gap:6px; justify-content:flex-end; }
.fes-constraint-warning { margin:0 16px 12px; padding:8px 12px; border:1px solid var(--aryvor-danger,#A8615C); color:var(--aryvor-danger,#A8615C); font-size:12px; }
.fes-constraint-warning ul { margin:4px 0 0; padding-left:18px; }
.fes-extra-material { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
@media (max-width: 720px) {
.fes-template-row { grid-template-columns:1fr 1fr; }
}
/* Energization workspace */
.energization-workspace-tabs{display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.energization-workspace-tabs button{border:0;background:transparent;color:var(--muted);padding:11px 14px;font:inherit;font-weight:700;cursor:pointer;border-bottom:3px solid transparent}
.energization-workspace-tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
.energization-kpis{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:10px;margin:16px 0 22px}
.energization-kpi-card{padding:16px;border:1px solid var(--line);border-radius:0;border-left:3px solid var(--line);background:var(--surface)}
.energization-kpi-card strong{display:block;font-size:26px;color:var(--ink)}
.energization-kpi-card span{color:var(--muted);font-size:12px}
.energization-kpi-card.is-energized{border-left-color:var(--ok)}.energization-kpi-card.is-energized strong{color:var(--ok)}
.energization-kpi-card.is-ready{border-left-color:#5C6C96}.energization-kpi-card.is-ready strong{color:#5C6C96}
.energization-kpi-card.is-warning{border-left-color:var(--warn)}.energization-kpi-card.is-warning strong{color:var(--warn)}
.energization-kpi-card.is-blocked{border-left-color:var(--critical)}.energization-kpi-card.is-blocked strong{color:var(--critical)}
.energization-kpi-card.is-unavailable{border-left-color:var(--muted)}
.energization-blocker-list{display:flex;flex-direction:column;gap:6px}
.energization-blocker-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:0;background:var(--surface);text-align:left;color:var(--ink)}
.energization-blocker-row:hover{border-color:#5C6C96}
.energization-blocker-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:0;font-weight:800;font-size:13px}
.energization-blocker-row.is-blocked .energization-blocker-icon{color:var(--critical);background:color-mix(in srgb,var(--critical) 16%,transparent)}
.energization-blocker-row.is-unavailable .energization-blocker-icon{color:var(--muted);background:color-mix(in srgb,var(--muted) 16%,transparent)}
.energization-blocker-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.energization-blocker-main strong{font-size:13px;color:var(--ink)}
.energization-blocker-main small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.energization-blocker-chevron{color:var(--muted);font-size:16px}
.energization-loto-kpis{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:12px;margin:12px 0 20px}.energization-loto-kpis article{display:flex;align-items:baseline;gap:10px;padding:16px;border:1px solid var(--line);border-radius:0;background:var(--surface)}.energization-loto-kpis strong{font-size:28px}.energization-loto-kpis span{color:var(--muted);font-size:12px;font-weight:700}
.loto-row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.energization-register-header .module-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.energization-register-header .universal-table-toolbar{margin:0}
.loto-form textarea{min-height:90px}
.switching-execution{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px}.switching-execution label{display:grid;grid-template-columns:auto auto 1fr;align-items:start;gap:7px;padding:8px;background:var(--panel-2);border-radius:8px}.switching-execution input{margin-top:3px}
/* Energization single line diagram: draggable panels, live connections and the
configurable devices that belong to the panel they are installed in. */
.sld-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 0 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.sld-tool-group{display:flex;align-items:center;gap:6px;padding-right:14px;border-right:1px solid var(--line)}
.sld-tool-group:last-child{border-right:0;margin-left:auto}
.sld-tool-group>label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sld-toolbar .filter-btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.sld-zoom{font-variant-numeric:tabular-nums;font-size:11px;color:var(--muted);min-width:44px;text-align:center}
.sld-counters .filter-btn{display:inline-flex;align-items:center;gap:6px;font-size:11px}
.sld-counters strong{font-size:14px;font-variant-numeric:tabular-nums}
.sld-counters .state-energized strong{color:var(--ok)}.sld-counters .state-ready strong{color:var(--accent)}
.sld-counters .state-warning strong{color:var(--warn)}.sld-counters .state-blocked strong{color:var(--critical)}
.sld-stage{display:flex;gap:12px;align-items:stretch;height:min(72vh,760px);min-height:420px}
.sld-viewport{position:relative;flex:1;min-width:0;overflow:hidden;background:var(--bg);border:1px solid var(--line);border-radius:10px;cursor:grab;touch-action:none;--sld-grid:20px;--sld-grid-x:0px;--sld-grid-y:0px}
.sld-viewport.is-panning{cursor:grabbing}
.sld-viewport::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:calc(var(--sld-grid)*5) calc(var(--sld-grid)*5);background-position:var(--sld-grid-x) var(--sld-grid-y)}
.sld-world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.sld-wires{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.sld-wire{fill:none;stroke:var(--muted);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sld-wire.state-energized{stroke:var(--ok);stroke-width:2.5}
.sld-wire.state-ready{stroke:var(--accent)}
.sld-wire.state-warning{stroke:var(--warn)}
.sld-wire.state-blocked{stroke:var(--critical);stroke-dasharray:7 5}
.sld-wire.state-open{stroke:var(--critical);stroke-dasharray:2 6}
.sld-wire.state-idle{stroke:var(--line)}
.sld-wire-hit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}
.sld-wire-flow{fill:none;stroke:var(--ok);stroke-width:2.5;stroke-dasharray:5 13;opacity:.85;animation:sldFlow 1.1s linear infinite}
@keyframes sldFlow{to{stroke-dashoffset:-18}}
@media(prefers-reduced-motion:reduce){.sld-wire-flow{animation:none;opacity:.45}}
.sld-wire-label{font-size:9.5px;fill:var(--muted);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.sld-ghost-wire{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:5 4}
.sld-card{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);user-select:none;cursor:grab}
.sld-card:hover{border-color:var(--accent)}
.sld-card.is-dragging{cursor:grabbing;z-index:60;border-color:var(--accent)}
.sld-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sld-card.is-drop-target{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.sld-card.is-dimmed{opacity:.3}
.sld-card.state-energized{border-left:3px solid var(--ok)}
.sld-card.state-ready{border-left:3px solid var(--accent)}
.sld-card.state-warning{border-left:3px solid var(--warn)}
.sld-card.state-blocked{border-left:3px solid var(--critical)}
.sld-card.state-unavailable{border-left:3px solid var(--muted)}
.sld-terminal{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;border:2px solid var(--muted);background:var(--panel);cursor:crosshair;z-index:3}
.sld-terminal:hover,.sld-terminal.is-active{border-color:var(--accent);background:var(--accent)}
.sld-incoming,.sld-departures{display:grid;gap:1px;background:var(--line)}
.sld-incoming{border-bottom:1px solid var(--line)}
.sld-departures{border-top:1px solid var(--line)}
.sld-device{position:relative;border:0;background:var(--soft);padding:7px 8px 6px;cursor:pointer;text-align:left;width:100%;color:var(--text)}
.sld-incoming .sld-device{display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 8px;align-items:center}
.sld-departures .sld-device{display:grid;justify-items:center;gap:0;padding:5px 4px 8px}
.sld-device:hover{background:var(--hot-soft)}
.sld-device::before{content:"";position:absolute;top:0;left:21px;width:2px;height:10px;transform:translateX(-1px);background:currentColor;opacity:.7}
.sld-departures .sld-device::before{display:none}
.sld-departures .sld-device::after{content:"";position:absolute;bottom:0;left:50%;width:2px;height:7px;transform:translateX(-1px);background:currentColor;opacity:.7}
.sld-incoming .sld-symbol{grid-row:1/3;display:flex;align-items:center;justify-content:center}
.sld-departures .sld-symbol{order:3;line-height:0;margin-top:1px}
.sld-device b{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sld-device small{font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sld-dot{position:absolute;top:5px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--muted)}
.set-verified>.sld-dot,.set-na>.sld-dot{background:var(--ok)}
.set-set>.sld-dot,.set-approved_deviation>.sld-dot{background:var(--warn)}
.set-pending>.sld-dot,.set-deviation>.sld-dot{background:var(--critical)}
.sld-device.is-undocumented b{color:var(--muted);font-weight:600}
.sld-device.is-open,.sld-way.is-open{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--hot-soft) 6px 7px),var(--soft)}
.is-open .sld-blade{transform:rotate(-32deg);transform-origin:13px 20px}
.sld-departures .is-open .sld-blade{transform-origin:13px 36px}
.sld-body{padding:8px 10px 7px;display:grid;gap:5px;cursor:grab}
.sld-id{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sld-id b{font-size:13.5px}
.sld-id span{font-size:10px;color:var(--muted)}
.sld-meta{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sld-busbar{height:5px;background:var(--muted);opacity:.5}
.state-energized>.sld-body .sld-busbar{background:var(--ok);opacity:1}
.state-warning>.sld-body .sld-busbar{background:var(--warn);opacity:1}
.state-blocked>.sld-body .sld-busbar{background:var(--critical);opacity:.6}
.sld-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sld-pill{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--muted);color:var(--muted);border-radius:3px;white-space:nowrap}
.state-energized>.sld-body .sld-pill{border-color:var(--ok);color:var(--ok)}
.state-ready>.sld-body .sld-pill{border-color:var(--accent);color:var(--accent)}
.state-warning>.sld-body .sld-pill{border-color:var(--warn);color:var(--warn)}
.state-blocked>.sld-body .sld-pill{border-color:var(--critical);color:var(--critical)}
.sld-counts{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sld-counts .is-bad{color:var(--critical)}.sld-counts .is-warn{color:var(--warn)}
.sld-ways{border-top:1px solid var(--line)}
.sld-ways-summary{width:100%;border:0;background:transparent;color:var(--muted);padding:5px 9px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.sld-ways-summary:hover{background:var(--soft);color:var(--text)}
.sld-rollup{margin-left:auto;display:flex;gap:6px;font-size:10px;letter-spacing:0;text-transform:none}
.sld-rollup i{font-style:normal;display:inline-flex;align-items:center;gap:3px}
.sld-rollup i::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}
.sld-rollup .todo::before{background:var(--warn)}.sld-rollup .bad::before{background:var(--critical)}.sld-rollup .opened::before{background:var(--accent)}
.sld-ways-list{max-height:136px;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
.sld-way{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;text-align:left;
display:grid;grid-template-columns:16px auto minmax(0,1fr) auto auto;align-items:center;gap:7px;padding:3px 9px 3px 5px}
.sld-way:last-child{border-bottom:0}
.sld-way:hover{background:var(--hot-soft)}
.sld-way b{font-size:10px;font-weight:700}
.sld-way small{font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sld-way>span:not(.sld-way-symbol){font-size:9.5px;color:var(--muted)}
.sld-way-symbol{display:flex;align-items:center;justify-content:center;width:16px;height:19px;overflow:hidden}
.sld-way-symbol svg{transform:scale(.6);flex:0 0 auto}
.sld-way .sld-dot{position:static;width:6px;height:6px}
.sld-branch-toggle{position:absolute;bottom:-11px;right:-11px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;z-index:4;line-height:1;padding:0}
.sld-branch-toggle:hover{border-color:var(--accent);color:var(--accent)}
.sld-legend{position:absolute;right:12px;top:10px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;pointer-events:none}
.sld-legend span{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);padding:3px 7px;font-size:10px;border-radius:4px}
.sld-legend i{width:9px;height:3px;background:var(--muted)}
.sld-legend .state-energized i{background:var(--ok)}.sld-legend .state-ready i{background:var(--accent)}
.sld-legend .state-warning i{background:var(--warn)}.sld-legend .state-blocked i{background:var(--critical)}
.sld-inspector{width:330px;flex:0 0 330px;overflow-y:auto;padding:0 4px 20px 0;display:grid;gap:10px;align-content:start}
.sld-inspector-empty{padding:18px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);font-size:12px}
.sld-inspector-empty strong{display:block;color:var(--text);margin-bottom:4px}
.sld-inspector h4{margin:8px 0 0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sld-inspector-head{display:grid;gap:2px}
.sld-eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sld-inspector-head h3{margin:0;font-size:17px}
.sld-inspector-head p{margin:0;font-size:11.5px;color:var(--muted)}
.sld-status{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:6px;background:var(--panel)}
.sld-status.state-energized{border-left-color:var(--ok)}.sld-status.state-ready{border-left-color:var(--accent)}
.sld-status.state-warning{border-left-color:var(--warn)}.sld-status.state-blocked{border-left-color:var(--critical)}
.sld-status small{color:var(--muted);font-size:11px}
.sld-block-action{width:100%}
.sld-feeder-card{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:9px 10px;display:grid;gap:7px}
.sld-feeder-card header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sld-feeder-card header b{font-size:12px}
.sld-feeder-card header span,.sld-from{font-size:11px;color:var(--muted)}
.sld-device-line{display:grid;gap:2px;padding:7px 8px;border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:4px;background:var(--soft)}
.sld-device-line.set-verified,.sld-device-line.set-na{border-left-color:var(--ok)}
.sld-device-line.set-set,.sld-device-line.set-approved_deviation{border-left-color:var(--warn)}
.sld-device-line.set-pending,.sld-device-line.set-deviation{border-left-color:var(--critical)}
.sld-device-line.is-open{border-left-style:dashed}
.sld-device-role{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sld-device-line b{font-size:12px}
.sld-device-line>span:not(.sld-device-role):not(.sld-pill){font-size:10.5px;color:var(--muted)}
.sld-device-line .sld-pill{justify-self:start}
.sld-mini-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.sld-symbol-cell{width:34px;padding:4px 6px!important;color:var(--muted)}
.sld-symbol-cell svg{display:block}
.sld-way-filters{display:flex;gap:5px;flex-wrap:wrap}
.sld-way-filters button{border:1px solid var(--line);background:transparent;color:var(--muted);padding:3px 7px;font-size:10px;border-radius:4px;cursor:pointer}
.sld-way-filters button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.sld-inspector-ways{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.sld-inspector-ways .sld-way{padding:5px 9px 5px 5px}
.sld-issue{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;padding:7px 9px;border:1px solid var(--line);border-radius:4px;background:var(--panel);font-size:11.5px;margin-bottom:6px}
.sld-issue i{width:5px;height:5px;border-radius:50%;margin-top:6px;background:var(--critical)}
.sld-issue.is-warn i{background:var(--warn)}
.sld-issue.is-ok{color:var(--muted)}.sld-issue.is-ok i{background:var(--ok)}
.energization-device-form .energization-device-head{display:flex;align-items:center;gap:14px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--soft);margin-bottom:6px}
.energization-device-head .energization-device-art{width:74px;height:96px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--panel)}
.energization-device-head p{margin:3px 0 0;font-size:11.5px;color:var(--muted)}
@media(max-width:1180px){.sld-inspector{width:290px;flex-basis:290px}}
@media(max-width:900px){.sld-stage{flex-direction:column;height:auto}.sld-viewport{height:56vh;min-height:360px}.sld-inspector{width:auto;flex:1 1 auto;max-height:none}}
.energization-readiness-summary{display:flex;justify-content:space-between;padding:14px;border-left:5px solid var(--line);background:var(--panel);margin-bottom:12px}.energization-readiness-summary.state-ready,.energization-readiness-summary.state-energized{border-color:var(--ok)}.energization-readiness-summary.state-warning{border-color:var(--warn)}.energization-readiness-summary.state-blocked{border-color:var(--critical)}
@media(max-width:900px){.energization-kpis{grid-template-columns:repeat(2,minmax(120px,1fr))}}
.cable-test-suite{min-width:0}.cable-test-card{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.cable-test-card header{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}.cable-test-card textarea{width:100%;min-height:54px}.cable-test-suite-button{display:flex;flex-direction:column;align-items:flex-start}.cable-test-suite-button strong{font-size:14px}.cable-test-suite-button span{font-size:10px;color:var(--muted)}
.test-evidence-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.kpi-configure-button{margin:-12px 0 18px auto;display:block;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--panel);color:var(--text);cursor:pointer}.custom-kpi-list{display:grid;gap:8px}.custom-kpi-row{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:9px}.custom-kpi-row small{color:var(--muted)}.custom-kpi-row button{grid-column:2;grid-row:1/3}
/* ============================================================================ */
/* Stage 1 — app shell restyle: sidebar peek-collapse + nav polish. */
/* Appended after every earlier design era on purpose: source order lets this */
/* block win over the historical duplicate .shell/.sidebar/.tree rules above */
/* without having to touch or delete them. */
/* ============================================================================ */
/* Single sidebar, no separate rail — matches the approved design. Flex
instead of the historical 3-column grid so this doesn't have to fight
every earlier .shell{grid-template-columns:...} declaration above. */
.shell { display: flex; }
.sidebar {
flex: none; display: flex; flex-direction: column; position: relative;
overflow-y: auto; overflow-x: hidden;
transition: width .2s cubic-bezier(.2,.7,.3,1);
}
.workspace { flex: 1; min-width: 0; }
/* Width only above the mobile breakpoint — below 760px the dedicated mobile
drawer rule (width: min(320px,88vw), fixed position) already governs it. */
@media (min-width: 761px) {
.sidebar { width: 286px; }
.shell.sidebar-collapsed .sidebar { width: 76px; }
}
/* The very first base rule (line ~709) still hides the sidebar entirely on
collapse (opacity:0, pointer-events:none) — that made sense when collapse
meant "hide the nav, keep the separate rail". Now the sidebar itself is
what stays, just narrower, so it must stay visible and clickable. */
.shell.sidebar-collapsed .sidebar { opacity: 1; pointer-events: auto; }
.sb-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 14px; flex: none; }
.sb-head .brand { flex: none; }
.sb-head .project-title { min-width: 0; overflow: hidden; white-space: nowrap; }
.sb-head .sidebar-toggle { flex: none; margin-left: auto; }
.shell.sidebar-collapsed .sb-head { flex-direction: column; justify-content: center; padding: 16px 0; gap: 10px; }
.shell.sidebar-collapsed .sb-head .project-title { display: none; }
.shell.sidebar-collapsed .sb-head .sidebar-toggle { margin-left: 0; }
.project-switch {
display: flex; align-items: center; gap: 8px; width: calc(100% - 28px);
margin: 0 14px 12px; padding: 9px 10px; background: var(--aryvor-elevated);
border: 1px solid var(--aryvor-border); cursor: pointer; text-align: left;
color: inherit; font: inherit; flex: none;
}
.project-switch-logo {
width: 28px; height: 28px; flex: none; background: var(--aryvor-primary);
color: #fff; font-weight: 700; font-size: 12px;
display: flex; align-items: center; justify-content: center;
}
.project-switch-logo img { width: 100%; height: 100%; padding: 3px; object-fit: contain; background: #fff; }
.project-switch-text { flex: 1; min-width: 0; overflow: hidden; }
.project-switch-text strong { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-switch-text small { display: block; font-size: 10px; color: var(--aryvor-muted); }
.project-switch .chev { flex: none; color: var(--aryvor-muted); }
.shell.sidebar-collapsed .project-switch { width: 44px; height: 44px; margin: 0 auto 12px; justify-content: center; padding: 0; }
.shell.sidebar-collapsed .project-switch-text, .shell.sidebar-collapsed .project-switch .chev { display: none; }
.sidebar .search.sb-search { width: calc(100% - 28px); margin: 0 14px 14px; box-sizing: border-box; flex: none; }
.shell.sidebar-collapsed .sidebar .search.sb-search { display: none; }
.top-actions { margin-left: auto; }
.sidebar .tree { flex: none; }
.sidebar .sidebar-card { margin-top: auto; flex: none; }
.shell.sidebar-collapsed .sidebar .nav-label,
.shell.sidebar-collapsed .sidebar .sidebar-contractor-logo,
.shell.sidebar-collapsed .sidebar .commessa-exit-btn,
.shell.sidebar-collapsed .sidebar .user-info-text,
.shell.sidebar-collapsed .sidebar .logout-btn {
display: none;
}
.shell.sidebar-collapsed .sidebar .sidebar-card {
display: flex; flex-direction: column; align-items: center;
padding-top: 10px; border-top: 1px solid var(--aryvor-border);
}
.shell.sidebar-collapsed .sidebar .user-info-card { flex-direction: column; gap: 0; }
/* Section headers collapse to a plain gap instead of vanishing outright —
still marks where one nav group ends and the next begins in the icon rail. */
.shell.sidebar-collapsed .sidebar .tree p {
display: block; height: 14px; margin: 8px 0 0; padding: 0; border: none;
overflow: hidden; font-size: 0;
}
.shell.sidebar-collapsed .sidebar .tree p button { display: none; }
/* Peek mode ignores each section's accordion open/closed state on purpose —
the collapsed sidebar shows every icon regardless, while the accordion
state itself is left untouched for when the sidebar re-expands. */
.shell.sidebar-collapsed .sidebar .tree a.nav-section-hidden { display: flex !important; }
.shell.sidebar-collapsed .sidebar .tree a {
justify-content: center;
margin-left: 0;
padding: 9px 0;
gap: 0;
}
.shell.sidebar-collapsed .sidebar .tree a::after { content: none; }
.shell.sidebar-collapsed .sidebar .tree a .nav-svg { width: 18px; height: 18px; flex: 0 0 18px; }
/* 761-1180px used to be a dead zone: JS treated it as "compact" (mobile
drawer) but the CSS that actually renders the mobile drawer (hamburger
button, overlay sidebar) only kicks in at 760px — see the compactLayout
comment in modules/ui.js. A leftover unconditional rule from an older
design era also kept forcing .sidebar off-screen (position:absolute +
translateX) in this range regardless of state, which knocked .workspace
out of its grid column into the sidebar's vacated one. Restore the same
normal in-flow sidebar this range already has above 1180px. */
@media (min-width: 761px) and (max-width: 1180px) {
.sidebar {
position: relative;
transform: none;
opacity: 1;
pointer-events: auto;
}
}
/* Expanded sidebar: give the active item a soft fill to match its left-accent
border, not just the border alone. */
.tree a.selected { background: color-mix(in srgb, var(--aryvor-primary) 12%, transparent) !important; }
html[data-theme="light"] .tree a.selected { background: color-mix(in srgb, var(--aryvor-primary) 10%, transparent) !important; }
/* Account block lives at the bottom of the (single, no-rail) sidebar
instead of the topbar — see the .sidebar .sidebar-card rules above. */
#roleChip, #avatarBtn { display: none !important; }
/* The redesigned Dashboard's forecast panel is the hero now — the generic
title/%/pills band (shared markup other views still use as-is) would just
duplicate it, so it's hidden for this view only. */
body[data-view="dashboard"] .hero-grid { display: none !important; }
/* #kpiGrid (the Ultra "Configure KPIs" custom-widget strip) isn't part of
the approved design and, with the hero band gone, floats with no spacing
of its own — hidden here too until it's deliberately reintegrated
somewhere in the new layout. Nothing else about that feature is touched. */
body[data-view="dashboard"] #kpiGrid,
body[data-view="dashboard"] .kpi-configure-button { display: none !important; }
/* Toggle button lost its accent styling when it moved out of the old .rail
(that colour rule was scoped to ".rail .sidebar-toggle", which no longer
matches anything now the rail is gone) — restyle it directly. */
.sidebar-toggle {
width: 30px; height: 30px; flex: none;
border: 1px solid var(--aryvor-border); background: transparent;
color: var(--aryvor-primary-hi); box-shadow: none; cursor: pointer;
display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.sidebar-toggle:hover { border-color: var(--aryvor-primary); background: rgba(132,150,194,.08); color: var(--aryvor-secondary); }
/* The white-label contractor logo (data.contractorProfile — the installing
company's own branding, unrelated to which project/commessa is open) is
part of the Aryvor/product identity, not the project-switch card — it
sits under the "Aryvor" title instead. */
.project-switch .sidebar-contractor-logo { display: none !important; }
.sb-head { flex-wrap: wrap; }
.sb-head .sidebar-contractor-logo {
width: 100%; height: 34px; margin: 8px 0 0; flex: none;
order: 3;
}
.sb-head .sidebar-contractor-logo img { object-position: left center; }
.shell.sidebar-collapsed .sb-head .sidebar-contractor-logo { display: none; }
/* Account block must stay visible at the bottom no matter how long the nav
list is — the nav scrolls in its own region instead of the whole sidebar,
so the card is never pushed off-screen. (Letting .tree stretch to fill a
tall flex column can blow up its grid row heights — align-content:start
keeps every row sized to its own content instead of sharing the
leftover space evenly.) */
.sidebar { overflow: hidden; }
.sidebar .tree { flex: 1 1 auto; overflow-y: auto; min-height: 0; align-content: start; }
/* ── Gantt/Planning tracker: activity-type multi-select filter ──
The activity-colour legend doubles as the filter control — click a
swatch to toggle that activity type on/off; several can be active
at once (multi-select), matching the .quick-filter-chip idiom used
elsewhere in the app. */
.gantt-legend-section > strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gantt-legend-filter {
appearance: none;
border: 1px solid transparent;
background: transparent;
padding: 2px 6px;
margin: -2px -6px;
cursor: pointer;
font: inherit;
border-radius: 0;
transition: opacity .12s ease, border-color .12s ease;
}
.gantt-legend-filter:hover { border-color: var(--line); }
.gantt-legend-filter-off { opacity: .35; }
.gantt-legend-filter-off i { filter: grayscale(70%); }
.gantt-legend-clear {
appearance: none;
border: 1px solid var(--line);
background: transparent;
color: var(--aryvor-primary, inherit);
font-size: 9px;
letter-spacing: .35px;
text-transform: uppercase;
padding: 3px 8px;
cursor: pointer;
border-radius: 0;
}
.gantt-legend-clear:hover { background: color-mix(in srgb, var(--aryvor-primary, #888) 10%, transparent); }
.ig-empty-filter {
padding: 32px 16px;
text-align: center;
color: var(--muted);
font-size: 12px;
border: 1px dashed var(--line);
}
/* ── Gantt/Planning tracker: visible time-period picker ──────────
Lets the user pin the Gantt to a 1/6/12-month window (paged with
prev/next) or a custom range, instead of always spanning the whole
project — a multi-year plan is unreadable compressed into one screen. */
.gantt-range-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 14px;
margin: 8px 0;
padding: 8px 10px;
border: 1px solid var(--line);
background: rgba(255,255,255,.72);
}
.gantt-range-modes { display: flex; flex-wrap: wrap; gap: 4px; }
.gantt-range-btn {
appearance: none;
border: 1px solid var(--line);
background: transparent;
color: var(--ink);
font-size: 10px;
letter-spacing: .3px;
text-transform: uppercase;
padding: 5px 10px;
cursor: pointer;
border-radius: 0;
}
.gantt-range-btn:hover { border-color: var(--aryvor-primary, var(--line)); }
.gantt-range-btn.active {
background: var(--aryvor-primary, #333);
border-color: var(--aryvor-primary, #333);
color: #fff;
}
.gantt-range-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gantt-range-nav, .gantt-range-today {
appearance: none;
border: 1px solid var(--line);
background: transparent;
color: var(--ink);
font-size: 11px;
padding: 5px 9px;
cursor: pointer;
border-radius: 0;
}
.gantt-range-nav:hover, .gantt-range-today:hover { border-color: var(--aryvor-primary, var(--line)); }
.gantt-range-date { padding: 4px 6px; font-size: 11px; }
.gantt-range-window { color: var(--muted); font-size: 10px; white-space: nowrap; margin-left: 4px; }
.ig-bar-offscreen {
position: absolute;
top: 6px;
height: 24px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
color: color-mix(in srgb, var(--phase-color, var(--muted)) 80%, var(--ink));
background: color-mix(in srgb, var(--phase-color, var(--muted)) 18%, transparent);
border: 1px dashed color-mix(in srgb, var(--phase-color, var(--muted)) 60%, transparent);
cursor: pointer;
}
/* ── Punch list: Kanban view ─────────────────────────────────────
Status-grouped alternative to the flat table. Columns are
PUNCH_PROGRESS_STEPS; cards are draggable only into the immediately
next column (server-side logic still routes every drop through the
same modal/validation as the "Avanza" button — this is presentation
only). Modeled on the existing Quick Plan board (.qp-*). */
.punch-kanban-board {
display: grid;
grid-template-columns: repeat(7, minmax(180px, 1fr));
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
}
.punch-kanban-col {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
background: rgba(255,255,255,.03);
min-height: 220px;
}
.punch-kanban-col-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-bottom: 1px solid var(--line);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .3px;
color: var(--muted);
}
.punch-kanban-col-head span {
background: var(--surface, rgba(255,255,255,.06));
border-radius: 0;
padding: 1px 7px;
font-weight: 700;
}
.punch-kanban-col-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
min-height: 100px;
}
.punch-kanban-empty {
color: var(--muted);
font-size: 11px;
text-align: center;
padding: 12px 0;
}
.punch-kanban-card {
border: 1px solid var(--line);
background: var(--card, #1C1C1A);
padding: 8px 9px;
cursor: grab;
display: flex;
flex-direction: column;
gap: 4px;
}
.punch-kanban-card:active { cursor: grabbing; }
.punch-kanban-card.punch-firm-alert { border-color: color-mix(in srgb, var(--critical) 60%, var(--line)); }
.punch-kanban-card-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; }
.punch-kanban-card-title { margin: 0; font-size: 12px; line-height: 1.35; }
.punch-kanban-card-meta { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--muted); }
.punch-kanban-col-target { border-color: color-mix(in srgb, var(--aryvor-primary, #5C6C96) 55%, var(--line)); }
.punch-kanban-drop-hover {
background: rgba(92,108,150,.12);
outline: 2px dashed var(--aryvor-primary, #5C6C96);
outline-offset: -3px;
}
html[data-theme="light"] .punch-kanban-card { background: #fff; }
@media (max-width: 900px) {
.punch-kanban-board { grid-template-columns: repeat(7, minmax(160px, 1fr)); }
}
.punch-view-toggle { display: flex; gap: 0; border: 1px solid var(--line); }
.punch-view-toggle .filter-btn { border: none; border-radius: 0; margin: 0; }
.punch-view-toggle .filter-btn:not(:last-child) { border-right: 1px solid var(--line); }
.punch-view-toggle .filter-btn.active { background: var(--aryvor-primary, #333); color: #fff; }
/* ── Dashboard headline numbers: enlarge to match the per-role dashboard
mockup (Site/Project Mgr page) — the app's own numbers read noticeably
smaller than the reference. Appended as overrides rather than editing
the historical rules above, per this file's established pattern. */
.dash-forecast-date { font-size: 44px; }
.donut-center b { font-size: 40px; }
.donut-center span { font-size: 11px; }
body[data-view="dashboard"] .kpi-card strong { width: 92px; height: 92px; font-size: 26px; }
/* ── Shared daily bar chart (svgDailyBarChart) ────────────────────────── */
.daily-bar-chart { width: 100%; height: 110px; }
.daily-bar-value { font-size: 9px; font-weight: 700; fill: var(--fg); }
.daily-bar-daylabel { font-size: 9px; fill: var(--muted); }
.daily-bar-chart-wrap { margin: 6px 0 4px; }
/* ── QA/QC dashboard ───────────────────────────────────────────────────── */
.qa-dash-top { grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr); }
.qa-headline-card, .qa-daily-card { display: flex; flex-direction: column; }
.qa-caption { font-size: 10px; color: var(--muted); margin-top: 10px; line-height: 1.4; }
.qa-daily-num { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 8px; }
.qa-daily-num b { font-size: 28px; font-weight: 800; }
.qa-daily-num span { font-size: 11px; color: var(--muted); }
.qa-daily-num small { font-size: 10px; color: var(--muted); margin-left: 6px; }
.qa-category-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.qa-category-row { display: grid; grid-template-columns: minmax(90px,1fr) minmax(60px,2fr) 28px; align-items: center; gap: 8px; font-size: 11px; }
.qa-category-row .track { height: 5px; background: var(--border); overflow: hidden; }
.qa-category-row .fill { height: 100%; background: var(--aryvor-primary, #5C6C96); }
.qa-category-row b { text-align: right; font-size: 11px; }
.qa-queue-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.qa-queue-row:last-child { border-bottom: none; }
.qa-queue-row small { color: var(--muted); font-size: 10px; margin-right: auto; margin-left: 8px; }
.qa-queue-row b.good { color: var(--ok); }
.qa-queue-row b.risk { color: var(--critical); }
@media (max-width: 900px) {
.qa-dash-top { grid-template-columns: 1fr; }
}
/* ── Electrical Supervisor dashboard: constraint-block day badge ────────── */
.moved-card > b { align-self: center; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.moved-card > b.risk { color: var(--critical); }
/* ── Client dashboard: "Delivered to date" tiles ─────────────────────────── */
.client-delivered-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.client-delivered-tile { border: 1px solid var(--line); padding: 12px 10px; text-align: center; }
.client-delivered-tile b { display: block; font-size: 22px; font-weight: 800; }
.client-delivered-tile b small { font-size: 12px; font-weight: 700; }
.client-delivered-tile span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tray-fill-badge { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.tray-fill-badge.over { color: var(--critical); font-weight: 700; }
.tray-fill-ratio { display: inline-block; margin-left: 4px; font-weight: 400; color: var(--muted); }
.tray-fill-settings-bar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.tray-fill-diagram-wrap { text-align: center; margin: 0 0 14px; padding: 12px; border: 1px solid var(--line); background: var(--bg-alt, transparent); }
.tray-fill-diagram { max-width: 100%; max-height: 260px; }
.tray-fill-diagram-caption { font-size: 10px; fill: var(--muted); }
.tray-energy-label { fill: var(--aryvor-secondary, #8496C2); font-size: 7px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.tray-fill-diagram-wrap small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.mat-catalog-head { margin: 4px 0 12px; }
.mat-catalog-head p { font-size: 12px; color: var(--muted); margin: 0; }
.mat-catalog-input { max-width: 110px; }
.field-tray-fill { margin: 10px 16px 0; padding: 14px 16px; border: 1px solid var(--line); background: var(--surface); text-align: center; }
.field-tray-fill-stats { display: flex; justify-content: space-around; gap: 12px; margin-bottom: 10px; text-align: left; }
.field-tray-fill-stats span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.field-tray-fill-stats strong { font-size: 20px; color: var(--ink); }
.field-tray-fill-stats small { display: block; color: var(--muted); font-size: 11px; }
.field-tray-fill .tray-fill-diagram { max-width: 100%; max-height: 200px; }
.tray-fill-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.tray-fill-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.tray-fill-legend-dot.ghost { background: transparent; border: 1px dashed var(--muted); }
/* IO Check */
.io-check-unmatched { display:block; color: var(--danger, #b3261e); font-size: 10px; font-weight: 600; }
.io-check-panel-ready { border-color: var(--success, #1f8a4c); }
.io-check-photo-count { font-size: 11px; color: var(--muted); margin-left: 4px; }
.io-check-kpis { margin-top: 14px; }
.io-check-vis-badge { display: inline-block; margin-right: 4px; padding: 2px 6px; border: 1px solid var(--line); font-size: 9px; font-weight: 800; letter-spacing: .03em; color: var(--muted); opacity: .45; }
.io-check-vis-badge.on { color: var(--ink); opacity: 1; border-color: var(--accent, #8496C2); background: color-mix(in srgb, var(--surface) 88%, var(--accent, #8496C2) 12%); }
.io-check-visibility-fields { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--line); }
.io-check-visibility-fields legend { padding: 0 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.io-check-visibility-fields label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.io-check-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 14px; align-items: start; }
.io-check-panel-list { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); background: var(--surface); padding: 10px; max-height: 640px; overflow-y: auto; }
.io-check-panel-row { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px 11px; border: 1px solid transparent; border-radius: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.io-check-panel-row:hover { background: color-mix(in srgb, var(--surface) 88%, var(--accent, #8496C2) 12%); }
.io-check-panel-row.active { border-color: var(--accent, #8496C2); background: color-mix(in srgb, var(--surface) 85%, var(--accent, #8496C2) 15%); }
.io-check-panel-row.is-ready .io-check-panel-row-head strong { color: var(--ok, #6E8F6B); }
.io-check-panel-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.io-check-panel-row-head strong { font-size: 13px; }
.io-check-panel-row-head small { color: var(--muted); font-size: 11px; }
.io-check-panel-row-note { color: var(--critical, #A8615C); font-size: 10px; }
@media (max-width: 880px) {
.io-check-layout { grid-template-columns: 1fr; }
.io-check-panel-list { max-height: none; flex-direction: row; flex-wrap: wrap; }
.io-check-panel-row { width: auto; min-width: 160px; }
}
.io-check-modal .io-check-summary { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 16px; margin-bottom: 12px; }
.io-check-modal .io-check-summary dt { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.io-check-modal .io-check-summary dd { margin: 0; font-size: 13px; }
.io-check-photos { margin-top: 10px; display:flex; flex-direction:column; gap:6px; }
.io-check-photo-list { display:flex; flex-wrap:wrap; gap:6px; }
.io-check-verified-by { font-size: 11px; color: var(--muted); margin-top: 8px; }
.io-check-manual-badge { display: block; color: var(--accent, #8496C2); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.io-check-manual-note { margin: 0 0 4px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; color: var(--muted); }
.io-check-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* V4.5: network switch topology — reuses .sld-stage/.sld-viewport/.sld-wire
(energization single line diagram, styles.css above) for the pan/zoom
canvas chrome; only the node card and the ring-link stroke are new. */
.network-topology-stage { width: 100%; }
.network-node { position: absolute; top: 0; left: 0; width: 150px; display: flex; flex-direction: column; gap: 4px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: grab; touch-action: none; user-select: none; }
.network-node.is-device { opacity: .75; border-style: dashed; }
.network-node b { font-size: 12.5px; }
.network-node small { color: var(--muted); font-size: 10.5px; }
.network-node .filter-btn { align-self: flex-start; margin-top: 2px; }
.sld-wire.is-ring { stroke: var(--accent, #8496C2); stroke-width: 3; stroke-dasharray: 1 6; stroke-linecap: round; }
.sld-legend span.is-ring i { background: var(--accent, #8496C2); }
/* v4.5.1: tag search in PDF drawings + custom PDF viewer */
.tag-drawing-search { border:1px solid var(--line); background:var(--surface); padding:14px 16px; margin-bottom:14px; }
.tag-drawing-search h3 { margin:0 0 8px; font-size:14px; }
.tag-drawing-search .hint { margin:6px 0 10px; font-size:11px; color:var(--muted); }
.document-pdf-source { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line); margin-bottom:12px; }
.document-pdf-source small { color:var(--muted); }
.tag-search-results-list { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; }
.tag-search-result { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); padding:8px 10px; background:var(--bg); }
.tag-search-result div { display:flex; flex-direction:column; gap:2px; }
.tag-search-result span { font-size:11px; color:var(--muted); }
.empty-state.small { padding:14px; font-size:12px; }
.pdf-viewer { display:flex; flex-direction:column; gap:8px; }
.pdf-viewer-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pdf-viewer-page-label { font-size:12px; color:var(--muted); min-width:110px; text-align:center; }
.pdf-viewer-spacer { flex:1; }
.pdf-viewer-tag-label { font-size:11px; padding:3px 8px; border:1px solid var(--line); color:var(--muted); }
.pdf-viewer-canvas-wrap { max-height:70vh; overflow:auto; border:1px solid var(--line); background:var(--surface); text-align:center; }
.pdf-viewer-canvas-wrap canvas { max-width:none; }
/* Punch list: due dates */
.punch-due-badge { display:inline-block; padding:1px 6px; font-size:10px; font-weight:700; border:1px solid var(--line); color:var(--muted); }
.punch-due-badge.soon { color:var(--warn); border-color:var(--warn); }
.punch-due-badge.late { color:var(--critical); border-color:var(--critical); }
/* Production tables: row actions as a horizontal strip of icons */
.row-actions-cell { width:1%; white-space:nowrap; }
.row-icon-actions { display:flex; flex-wrap:nowrap; align-items:center; gap:4px; }
.row-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid var(--aryvor-border, var(--line)); background:transparent; color:var(--aryvor-muted, var(--muted)); cursor:pointer; flex:0 0 auto; }
.row-icon-btn svg { width:16px; height:16px; }
.row-icon-btn:hover, .row-icon-btn:focus-visible { color:var(--aryvor-text, var(--text)); border-color:var(--aryvor-primary-hi, var(--accent)); background:var(--aryvor-surface-2, transparent); }
@media (max-width: 760px) { .row-icon-btn { width:40px; height:40px; } }
.precondition-block-banner { padding:8px 10px; border:1px solid var(--critical); color:var(--critical); font-size:12px; }
.work-executor-control { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); margin-right:8px; }
.work-executor-control .mini-input { width:180px; }
@media (max-width: 760px) { .work-executor-control .mini-input { width:130px; } }