/* Shared warm Byggspor heading and published-plan browser. Screen only. */ #shiftPlansView .shift-heading-warm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 28px; position: relative; isolation: isolate; min-height: 138px; margin: 0 0 22px; padding: 24px 28px; border: 1px solid #ece9e4; border-radius: 16px; background: linear-gradient(110deg,#f4f1eb,#f8f6f2 65%,#f2efea); } #shiftPlansView .shift-heading-copy { position: relative; display: flex; align-items: center; gap: 22px; min-width: 0; padding: 0; } #shiftPlansView .shift-heading-warm::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url("../assets/brand/orders-banner.svg") no-repeat 52% 65% / 460px auto; opacity: .1; pointer-events: none; } #shiftPlansView .shift-heading-copy > div { min-width: 0; } #shiftPlansView .shift-heading-icon { display: grid; place-items: center; flex: 0 0 80px; height: 80px; border-radius: 14px; background: #e7e4df; color: var(--bs-color-brand-800); } #shiftPlansView .shift-heading-icon svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #shiftPlansView .shift-heading-context { margin: 0 0 6px; color: var(--bs-color-accent-500); letter-spacing: .12em; font: 750 12px/1.4 var(--bs-font-family); } #shiftPlansView .shift-heading-warm h1 { margin: 0; color: var(--bs-color-brand-800); font: 650 30px/1.2 var(--bs-font-family); letter-spacing: -.025em; overflow-wrap: anywhere; } #shiftPlansView #shiftPanelDescription { margin: 7px 0 0; color: #536b79; font: 400 15px/1.5 var(--bs-font-family); max-width: 660px; } #shiftPlansView .shift-heading-side { display: grid; justify-items: end; gap: 12px; min-width: 0; } #shiftPlansView .shift-heading-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; } #shiftPlansView .shift-company-label { max-width: 340px; padding: 5px 11px; border-radius: 7px; background: transparent; color: #526a79; font: 400 13px/1.4 var(--bs-font-family); overflow-wrap: anywhere; } #shiftPlansView .shift-company-edit { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #536b79; font: 600 18px/1 var(--bs-font-family); cursor: pointer; } #shiftPlansView .shift-company-edit:hover { background: #eaf0f3; border-color: #dce3e6; } #shiftPlansView .shift-heading-status { flex-wrap: wrap; } #shiftPlansView .shift-heading-status > span { font: 500 12px/1.4 var(--bs-font-family); letter-spacing: 0; text-transform: none; } #shiftPlansView .shift-heading-status:not(:has(> span:not(.hidden))) { display: none; } #shiftPlansView .shift-heading-actions:has(> [data-heading-panel]:not(.hidden):not(:empty)) { display: block; } #shiftPlansView .shift-heading-actions > [data-heading-panel], #shiftPlansView .shift-heading-actions .shift-directory-head-actions, #shiftPlansView .shift-heading-actions .shift-holiday-head-actions, #shiftPlansView .shift-heading-actions .shift-dashboard-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; } #shiftPlansView .shift-heading-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; height: auto; padding: 10px 16px; border-radius: 7px; font: 500 15px/1.4 var(--bs-font-family); white-space: normal; } #shiftPlansView .shift-heading-actions .primary-small, #shiftPlansView .shift-heading-actions .shift-dashboard-primary { background: var(--bs-color-accent-500); border: 1px solid var(--bs-color-accent-500); color: #fff; } #shiftPlansView .shift-heading-actions .primary-small:hover, #shiftPlansView .shift-heading-actions .shift-dashboard-primary:hover { background: var(--bs-color-accent-600); } #shiftPlansView .shift-heading-actions .secondary-btn, #shiftPlansView .shift-heading-actions .shift-dashboard-secondary { background: #fff; border: 1px solid #cbd6da; color: var(--bs-color-brand-800); } #shiftPlansView .shift-heading-actions .shift-dashboard-scope { font-size: 13px; font-weight: 400; min-height: 32px; background: transparent; border: 0; padding: 0; } #shiftPlansView .shift-heading-actions label { display: flex; align-items: center; gap: 9px; } #shiftPlansView .shift-heading-actions label > span { font: 500 14px/1.4 var(--bs-font-family); color: #536b79; } #shiftPlansView .shift-heading-actions select { width: auto; min-height: 44px; padding: 0 30px 0 12px; border: 1px solid #cbd6da; border-radius: 7px; background: #fff; color: var(--bs-color-brand-800); font: 400 15px var(--bs-font-family); } #shiftPlansView .shift-heading-actions .shift-toolbar-view { width: auto; flex: initial; margin: 0; } #shiftPlansView .shift-heading-side .shift-workspace-inline { margin: 0; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; } #shiftPlansView .shift-heading-side .shift-workspace-inline input { min-width: 0; max-width: 100%; font-size: 14px; } #shiftPlansView .shift-heading-side .shift-workspace-inline button { font-size: 14px; } #shiftPlansView .shift-heading-warm button:focus-visible, #shiftPlansView .shift-heading-warm select:focus-visible { outline: 3px solid #6f8996; outline-offset: 3px; } /* Preserve the existing registers and filters, with their repeated titles removed. */ #shiftPlansView :is(#shiftWorkersPanel, #shiftHiredPanel, #shiftProjectsPanel, #shiftTravelPanel) > .shift-directory-card { padding-top: 20px; } #shiftPlansView #shiftHolidaysPanel > .shift-holiday-card { padding-top: 20px; } @media (max-width: 1100px) { #shiftPlansView .shift-heading-warm { grid-template-columns: minmax(0, 1fr); gap: 12px; } #shiftPlansView .shift-heading-side { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; padding-left: 0; } #shiftPlansView .shift-heading-meta { justify-content: flex-start; } #shiftPlansView .shift-heading-actions { margin-left: auto; } } @media (max-width: 600px) { #shiftPlansView .shift-heading-warm { min-height: 0; margin-bottom: 16px; padding: 18px; } #shiftPlansView .shift-heading-copy { padding-left: 0; gap: 13px; } #shiftPlansView .shift-heading-icon { flex-basis: 56px; height: 56px; } #shiftPlansView .shift-heading-icon svg { width: 30px; height: 30px; } #shiftPlansView .shift-heading-warm h1 { font-size: 25px; } #shiftPlansView #shiftPanelDescription { font-size: 14px; } #shiftPlansView .shift-heading-side { padding-left: 0; align-items: flex-start; } #shiftPlansView .shift-company-label { max-width: min(280px, 65vw); font-size: 12px; } #shiftPlansView .shift-company-edit { width: 40px; height: 40px; } #shiftPlansView .shift-heading-actions { width: 100%; margin-left: 0; } #shiftPlansView .shift-heading-actions > [data-heading-panel], #shiftPlansView .shift-heading-actions .shift-directory-head-actions, #shiftPlansView .shift-heading-actions .shift-holiday-head-actions, #shiftPlansView .shift-heading-actions .shift-dashboard-head-actions { justify-content: flex-start; } #shiftPlansView .shift-heading-actions button { padding-inline: 13px; font-size: 14px; } #shiftPlansView .shift-heading-actions .shift-toolbar-view { flex-wrap: wrap; } } /* Publication selection: project-first, readable version rows. */ #shiftPlansView .shift-official-layout { grid-template-columns: 310px minmax(0, 1fr); gap: 18px; align-items: start; } #shiftPlansView .shift-publication-sidebar { padding: 18px; min-width: 0; } #shiftPlansView .shift-publication-sidebar h3 { font: 650 20px/1.3 var(--bs-font-family); letter-spacing: -.3px; } #shiftPlansView .shift-publication-sidebar .section-head p { font: 400 14px/1.5 var(--bs-font-family); } #shiftPlansView .shift-publication-sidebar .count { font: 500 13px/1.4 var(--bs-font-family); white-space: nowrap; } #shiftPlansView .shift-publication-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 16px 0; } #shiftPlansView .shift-publication-tools label { display: grid; gap: 5px; } #shiftPlansView .shift-publication-tools label > span { font: 600 14px/1.4 var(--bs-font-family); text-transform: none; } #shiftPlansView .shift-publication-tools input, #shiftPlansView .shift-publication-tools select { width: 100%; min-width: 0; height: 44px; font: 400 15px var(--bs-font-family); border: 1px solid #cbd6da; border-radius: 7px; background: white; padding: 0 10px; } #shiftPlansView .shift-publication-group { margin: 0; padding: 14px 0; border-top: 1px solid #dce5eb; } #shiftPlansView .shift-publication-group h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 6px 10px; font: 650 16px/1.4 var(--bs-font-family); text-transform: none; } #shiftPlansView .shift-publication-group h4 span { font: 650 16px/1.4 var(--bs-font-family); white-space: normal; overflow-wrap: anywhere; } #shiftPlansView .shift-publication-group h4 small { flex: none; font: 400 13px/1.4 var(--bs-font-family); } #shiftPlansView .shift-publication-item { width: 100%; padding: 12px; margin: 4px 0; border: 0; border-left: 3px solid transparent; border-radius: 7px; text-align: left; background: transparent; color: #203848; } #shiftPlansView .shift-publication-item:hover { background: #f3f6f8; } #shiftPlansView .shift-publication-item.active { background: #eaf0f3; border-left-color: var(--bs-color-accent-500); } #shiftPlansView .shift-publication-item strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; font: 650 16px/1.4 var(--bs-font-family); text-transform: none; overflow-wrap: anywhere; } #shiftPlansView .shift-publication-item span, #shiftPlansView .shift-publication-item small { display: block; margin-top: 4px; font: 400 14px/1.45 var(--bs-font-family); color: #536b79; } #shiftPlansView .shift-publication-latest { display: inline-block; padding: 3px 9px; border-radius: 20px; background: #e0f1e5; color: #286442; font: 600 12px/1.4 var(--bs-font-family); vertical-align: middle; white-space: nowrap; } #shiftPlansView .shift-publication-history summary { cursor: pointer; padding: 10px; border-radius: 6px; background: #f5f7f9; color: #435b6b; font: 500 14px/1.5 var(--bs-font-family); } #shiftPlansView .shift-publication-history[open] summary { margin-bottom: 5px; } #shiftPlansView .shift-publication-newest > span { font: 650 16px/1.4 var(--bs-font-family); } #shiftPlansView .shift-publication-sidebar .shift-admin-empty { font: 400 15px/1.5 var(--bs-font-family); } /* Published calendar, never the print/email sheets. */ #shiftPlansView #shiftOfficialPreview { min-width: 0; overflow: visible; } #shiftPlansView .shift-official-head { flex-wrap: wrap; gap: 16px; padding: 20px; border-bottom: 1px solid #dce5eb; } #shiftPlansView .shift-official-head > div:first-child { flex: 1 1 270px; min-width: 0; } #shiftPlansView .shift-official-head p { margin: 0 0 5px; font: 650 12px/1.4 var(--bs-font-family); color: #536b79; letter-spacing: .05em; } #shiftPlansView .shift-official-head h2 { margin: 0 0 7px; font: 650 24px/1.3 var(--bs-font-family); overflow-wrap: anywhere; } #shiftPlansView .shift-official-head > div > span { font: 400 14px/1.5 var(--bs-font-family); } #shiftPlansView .shift-official-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #shiftPlansView .shift-official-actions button, #shiftPlansView .shift-official-options > summary { display: flex; align-items: center; justify-content: center; min-height: 44px; width: auto; padding: 10px 14px; font: 600 14px/1.4 var(--bs-font-family); border: 1px solid #cbd6da; border-radius: 7px; background: #fff; color: #203848; cursor: pointer; } #shiftPlansView .shift-official-actions .primary-small { background: var(--bs-color-accent-500); border-color: var(--bs-color-accent-500); color: white; } #shiftPlansView .shift-official-options { position: relative; } #shiftPlansView .shift-official-options > summary { list-style: none; min-width: 44px; } #shiftPlansView .shift-official-options > summary::-webkit-details-marker { display: none; } #shiftPlansView .shift-official-options > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 180px; padding: 6px; background: white; border: 1px solid #dce5eb; border-radius: 8px; box-shadow: 0 8px 24px #20384820; } #shiftPlansView .shift-official-options .shift-revoke-btn { width: 100%; color: #b52f2f; border: 0; } #shiftPlansView .shift-official-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 12px 20px; border-bottom: 1px solid #dce5eb; } #shiftPlansView .shift-official-week-control { display: flex; align-items: center; gap: 10px; } #shiftPlansView .shift-official-week-control button { min-width: 42px; height: 42px; border: 1px solid #cbd6da; border-radius: 7px; background: white; font: 500 25px var(--bs-font-family); color: #203848; } #shiftPlansView .shift-official-week-control button:disabled { opacity: .4; cursor: default; } #shiftPlansView [data-official-period] { font: 600 14px/1.4 var(--bs-font-family); text-align: center; } #shiftPlansView .shift-official-date-control { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0; font: 500 14px/1.4 var(--bs-font-family); } #shiftPlansView .shift-official-date-control > span { margin: 0; white-space: nowrap; font: inherit; } #shiftPlansView .shift-official-date-control input { min-height: 42px; border: 1px solid #cbd6da; border-radius: 7px; padding: 6px 8px; background: white; font: 400 14px var(--bs-font-family); } /* Reuse the working-plan calendar structure, with inert snapshot cells. */ #shiftPlansView #shiftOfficialPreview .shift-official-grid-wrap { width: 100%; max-width: 100%; border-radius: 0; isolation: isolate; overflow-x: auto; scroll-padding-left: 340px; } #shiftPlansView #shiftOfficialPreview .official-grid { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-worker-name { position: sticky !important; left: 0 !important; width: 340px !important; min-width: 340px !important; max-width: 340px !important; text-align: left; letter-spacing: 0; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-worker-name-head { padding: 7px 12px; vertical-align: middle; } #shiftPlansView #shiftOfficialPreview .shift-grid-worker-head-row { justify-content: flex-start; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-worker-name-cell { padding: 7px 14px; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-worker-cell { display: flex; padding: 0; min-height: 0; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-worker-copy { min-width: 0; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-worker-copy strong { display: inline; font: 500 var(--shift-readable-body)/1.35 var(--bs-font-family); text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-worker-person-meta { display: block; margin-top: 4px; font: 400 13px/1.35 var(--bs-font-family); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-day-header, #shiftPlansView #shiftOfficialPreview .official-grid td:not(.official-shift-group-calendar) { width: 44px; min-width: 44px; max-width: 44px; padding: 0; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-week-band { height: 25px; padding: 0 4px; text-align: center; font: 700 13px/1.35 var(--bs-font-family); } #shiftPlansView #shiftOfficialPreview .official-grid .shift-day-header { height: 66px; padding: 4px 2px; font: 600 13px/1.35 var(--bs-font-family); } #shiftPlansView #shiftOfficialPreview .official-grid .shift-day-header > span { font-weight: 700; text-transform: uppercase; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-day-header > strong { display: block; margin: 4px 0; font: 700 14px/1.25 var(--bs-font-family); } #shiftPlansView #shiftOfficialPreview .official-grid .shift-day-header > small { font-weight: 400; text-transform: uppercase; } #shiftPlansView #shiftOfficialPreview .official-grid tbody tr[data-official-worker] > th, #shiftPlansView #shiftOfficialPreview .official-grid tbody tr[data-official-worker] > td { height: 64px; } #shiftPlansView #shiftOfficialPreview .official-grid .official-shift-group-label { font: 650 13px/1.4 var(--bs-font-family); } #shiftPlansView #shiftOfficialPreview .official-grid .official-shift-group-label > span { font: 650 13px/1.4 var(--bs-font-family); letter-spacing: 0; } #shiftPlansView #shiftOfficialPreview .official-grid .official-shift-group-label small { display: inline; font: 400 13px/1.4 var(--bs-font-family); white-space: nowrap; } #shiftPlansView .shift-official-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px 20px; font: 400 14px/1.4 var(--bs-font-family); } #shiftPlansView .shift-official-legend { display: flex; flex-wrap: wrap; gap: 15px; } #shiftPlansView .shift-official-legend span { display: inline-flex; align-items: center; gap: 7px; } #shiftPlansView .shift-official-legend i { width: 20px; height: 20px; border: 1px solid #d4dfe4; border-radius: 4px; background: white; } #shiftPlansView .shift-official-legend .on { background: #97cf5c; } #shiftPlansView .shift-official-legend .holiday { background: #efb4b1; } #shiftPlansView :is(.shift-publication-sidebar,.shift-official-preview) :is(button,summary,input,select):focus-visible { outline: 3px solid #6f8996; outline-offset: 2px; } @media (max-width: 1100px) { #shiftPlansView .shift-official-layout { grid-template-columns: 270px minmax(0, 1fr); } } @media (max-width: 760px) { #shiftPlansView .shift-official-layout { grid-template-columns: minmax(0, 1fr); } #shiftPlansView .shift-publication-sidebar { position: static; } #shiftPlansView .shift-official-head { padding: 16px; } #shiftPlansView .shift-official-head > div:first-child { flex: initial; width: 100%; } #shiftPlansView .shift-official-head h2 { font-size: 22px; } #shiftPlansView .shift-official-actions { width: 100%; } #shiftPlansView .shift-official-actions button { padding: 10px; } #shiftPlansView .shift-official-navigation { padding: 12px; } #shiftPlansView .shift-official-week-control { width: 100%; justify-content: space-between; } #shiftPlansView .shift-mobile-scroll-hint { font: 400 14px/1.4 var(--bs-font-family); } #shiftPlansView #shiftOfficialPreview .official-grid .shift-worker-name { width: 190px !important; min-width: 190px !important; max-width: 190px !important; } #shiftPlansView #shiftOfficialPreview .shift-official-grid-wrap { scroll-padding-left: 190px; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-worker-name strong { font-size: 15px; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-worker-name small { font-size: 13px; } #shiftPlansView #shiftOfficialPreview .official-grid .shift-day-header, #shiftPlansView #shiftOfficialPreview .official-grid td:not(.official-shift-group-calendar) { width: 48px; min-width: 48px; max-width: 48px; } #shiftPlansView .shift-official-foot { padding: 14px; } } /* A single project heading and compact controls above the editable calendar. */ @media screen { #shiftDraftPanel #shiftDraftToolbar{display:block;padding:0;margin:0;border-radius:12px 12px 0 0;position:relative;z-index:5;box-shadow:none} #shiftDraftPanel .shift-draft-title-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px 18px} #shiftDraftPanel .shift-draft-project-title{min-width:0;flex:1} #shiftDraftPanel .shift-toolbar-project{display:block;max-width:100%} #shiftDraftPanel .shift-toolbar-project>span:first-child{position:static;clip:auto;width:auto;height:auto;display:block;font-size:11px;font-weight:700;letter-spacing:1.2px;color:#657b87;text-transform:uppercase} #shiftPlansView #shiftDraftPanel #shiftProjectFilter{width:auto;max-width:100%;min-width:0;height:46px;padding:0 36px 0 0;border:0;background-color:transparent;font-size:32px;font-weight:750;letter-spacing:-.8px;color:#132e40;opacity:1;cursor:pointer} #shiftProjectFilter option{font-size:16px;letter-spacing:normal} #shiftDraftProjectCount{display:block;color:#657b87;font-size:14px;margin-top:2px} #shiftDraftPanel .shift-draft-actions{display:flex;align-items:center;gap:10px;flex:none} #shiftDraftPanel .shift-toolbar-action{width:auto;padding:0 16px} #shiftDraftPanel .shift-toolbar-action span{display:inline} #shiftDraftPanel .shift-draft-controls{display:flex;align-items:center;gap:16px;padding:12px 20px;border-top:1px solid #dce4e8;flex-wrap:wrap} #shiftDraftPanel .shift-draft-period{display:flex;align-items:center;gap:16px} #shiftDraftPanel .shift-toolbar-range{display:block;order:-1;flex:auto;font-size:14px;text-align:left} #shiftDraftPanel .shift-grid-edit-guide{display:flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;position:relative;margin:0} #shiftDraftPanel .shift-grid-edit-guide button{padding:0 12px;font-size:14px;border:1px solid #d1dce1;border-radius:6px;background:white} #shiftDraftPanel .shift-grid-edit-guide button.active{border-color:#93c967;background:#f5faf0} #shiftDraftPanel .shift-worker-search{margin-left:auto;min-width:180px;max-width:360px} #shiftDraftPanel .shift-draft-popover{position:relative} #shiftDraftPanel .shift-draft-popover summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:42px;padding:0 12px;border:1px solid #cbd6da;border-radius:7px;background:#fff;color:#234052;font-size:14px;cursor:pointer} #shiftDraftPanel .shift-draft-popover summary::-webkit-details-marker{display:none} #shiftDraftPanel .shift-draft-popover summary:focus-visible{outline:3px solid #2b84694d;outline-offset:2px} #shiftDraftPanel .shift-draft-popover-body{position:absolute;right:0;top:calc(100% + 8px);width:280px;max-width:calc(100vw - 48px);padding:18px;display:grid;gap:14px;border:1px solid #d4dfe4;border-radius:10px;background:#fff;box-shadow:0 10px 32px #18334024;z-index:20;white-space:normal;font-size:14px;line-height:1.5} #shiftDraftPanel .shift-draft-popover:not([open])>.shift-draft-popover-body{display:none} #shiftDraftPanel .shift-draft-popover-body p{margin:0} #shiftDraftPanel .shift-draft-popover-body .shift-toolbar-filter>span:first-child{position:static;width:auto;height:auto;clip:auto;display:block;margin-bottom:5px} #shiftDraftPanel .shift-draft-popover-body .shift-toolbar-travel{justify-content:space-between} #shiftDraftPanel .shift-draft-help .shift-draft-popover-body{left:0;right:auto} #shiftDraftPanel .shift-project-card{border-top:0;border-radius:0 0 12px 12px;box-shadow:none;overflow:hidden} #shiftDraftPanel .shift-projects{gap:0} #shiftDraftPanel .shift-toolbar-travel input:focus-visible+.shift-switch-track{outline:3px solid #2b84694d;outline-offset:3px} @media(max-width:700px){ #shiftDraftPanel .shift-draft-title-row{padding:16px;flex-wrap:wrap;gap:14px} #shiftDraftPanel .shift-draft-project-title{flex-basis:100%} #shiftPlansView #shiftDraftPanel #shiftProjectFilter{font-size:28px} #shiftDraftPanel .shift-draft-actions{width:100%;justify-content:flex-end} #shiftDraftPanel .shift-draft-controls{padding:12px;gap:12px} #shiftDraftPanel .shift-draft-period{width:100%;justify-content:space-between;gap:8px} #shiftDraftPanel .shift-toolbar-weeks{order:0} #shiftDraftPanel .shift-grid-edit-guide{width:100%} #shiftDraftPanel .shift-draft-help{margin-left:auto} #shiftDraftPanel .shift-draft-help .shift-draft-popover-body{right:0;left:auto} #shiftDraftPanel .shift-worker-search{flex:1;min-width:140px;margin:0} #shiftDraftPanel .shift-draft-actions>.shift-draft-popover{order:8} } } /* Project actions are flat menu rows inside one popover. */ #shiftDraftPanel #shiftDraftProjectActions{padding:6px;gap:2px;width:296px} #shiftDraftProjectActions>button{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:6px;background:transparent;box-shadow:none;text-align:left;font-size:14px;color:#183340;cursor:pointer} #shiftDraftProjectActions>button:hover,#shiftDraftProjectActions>button:focus-visible{background:#eef3f5} #shiftDraftProjectActions>button small{margin-left:auto;white-space:nowrap;color:#607784} #shiftRoleOrderDialog{width:min(520px,calc(100vw - 32px));max-height:85vh;padding:0;border:1px solid #d4dfe4;border-radius:14px;color:#183340;box-shadow:0 20px 80px #18334030} #shiftRoleOrderDialog::backdrop{background:#102a3a66} .shift-role-order-form{padding:24px;font-size:15px;line-height:1.5} .shift-role-order-form header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .shift-role-order-form header p{margin:0 0 4px;color:#617783;font-size:14px} .shift-role-order-form h2{margin:0;font-size:23px;line-height:1.25} .shift-role-order-form header>button{border:0;background:transparent;font-size:24px;cursor:pointer} .shift-role-order-list{padding:0;margin:20px 0;list-style:none;display:grid;gap:8px;max-height:40vh;overflow:auto} .shift-role-order-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #dbe4e8;border-radius:8px;background:#fff} .shift-role-order-number{color:#708591;width:18px} .shift-role-order-list strong{flex:1;font-weight:600} .shift-role-order-list button{width:36px;height:36px;background:#f4f7f8;border:0;border-radius:6px;color:#183340;font-size:19px;cursor:pointer} .shift-role-order-list button:disabled{opacity:.3;cursor:default} .shift-role-order-note{color:#617783;font-size:13px} .shift-role-order-status{color:#ad3d34;font-size:14px} .shift-role-order-form footer{display:flex;justify-content:flex-end;gap:10px;padding-top:16px;border-top:1px solid #e1e8eb} /* Readable personnel menus and explicit project/date controls. */ .shift-worker-row-menu{max-height:calc(100dvh - 24px);overflow-y:auto;font-size:16px} .shift-worker-row-menu>header{padding:18px} .shift-worker-row-menu header strong{font-size:22px;line-height:1.3} .shift-worker-row-menu header span{font-size:14px;line-height:1.5} .shift-worker-row-menu header button{min-width:40px;min-height:40px} .shift-worker-menu-section h3{font-size:13px;padding:10px 18px} .shift-worker-menu-section>button,.shift-worker-menu-shift,.shift-worker-row-menu nav>.danger{grid-template-columns:26px minmax(0,1fr) auto;gap:12px;padding:13px 10px;min-height:68px} .shift-worker-menu-section b,.shift-worker-row-menu nav>.danger b{font-size:16px;font-weight:600;line-height:1.4} .shift-worker-menu-section small,.shift-worker-row-menu nav>.danger small{font-size:14px;line-height:1.45;color:#586f7c} .shift-worker-menu-shift select{font-size:16px;min-height:44px;width:110px} .shift-menu-icon,.shift-filter-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .shift-worker-row-menu nav>.danger{padding:14px 18px} .shift-allocation-dates-row>td{padding:12px;background:#f4f7f8;text-align:left} .shift-allocation-editor{position:sticky;left:12px;box-sizing:border-box;width:min(640px,calc(100vw - 64px));padding:20px;background:white;border:1px solid #d3dfe5;border-radius:10px;white-space:normal} .shift-allocation-editor h3{margin:0 0 16px;font-size:20px;color:#183340} .shift-allocation-editor .shift-allocation-date-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px} .shift-allocation-editor label>span{display:block;font-size:16px;font-weight:600;margin-bottom:7px;text-transform:none} .shift-allocation-editor input[type=date]{box-sizing:border-box;width:100%;min-width:0;height:48px;padding:10px 12px;font-size:16px;color:#183340;border:1px solid #bccdd7;border-radius:7px;background:white} .shift-allocation-editor p{margin:14px 0;color:#586f7c;font-size:14px;line-height:1.5} .shift-allocation-editor footer{display:flex;justify-content:flex-end;gap:10px;padding-top:14px;border-top:1px solid #e1e8ec} .shift-allocation-editor footer button{min-height:44px;font-size:16px} #shiftPlansView #shiftDraftPanel #shiftProjectFilter{height:56px;border:1px solid #bdcdd7;border-radius:8px;background-color:#fff;padding:4px 48px 4px 14px;background-position:right 16px center} #shiftPlansView #shiftDraftPanel #shiftProjectFilter:hover{border-color:#627f90;background-color:#f5f8fa} #shiftPlansView #shiftDraftPanel #shiftProjectFilter:focus-visible{outline:2px solid #285c7a;outline-offset:2px} @media(max-width:560px){.shift-worker-row-menu header strong{font-size:20px}.shift-worker-menu-section>button,.shift-worker-menu-shift{gap:8px;padding:12px 6px}.shift-allocation-editor{padding:14px}.shift-allocation-editor .shift-allocation-date-fields{grid-template-columns:1fr}.shift-allocation-editor footer{flex-wrap:wrap}#shiftPlansView #shiftDraftPanel #shiftProjectFilter{font-size:24px}} .shift-grid-add-personnel{display:inline-flex;align-items:center;justify-content:center;gap:8px} .shift-grid-add-personnel>span{line-height:1.2} .shift-grid-add-personnel .shift-personnel-plus{display:block;width:16px;height:16px;flex:0 0 16px;fill:none;stroke:#e7433a;stroke-width:1.7;stroke-linecap:round} #shiftWorkerRowMenu .shift-worker-menu-section b,#shiftWorkerRowMenu nav>.danger b{font-size:16px;font-weight:600;line-height:1.4} #shiftWorkerRowMenu .shift-worker-menu-section small,#shiftWorkerRowMenu nav>.danger small{font-size:14px;font-weight:400;line-height:1.45;color:#586f7c} #shiftWorkerRowMenu .shift-worker-menu-section>button>i{font-size:18px} #shiftDraftPanel .shift-allocation-dates-row>td{padding:12px;background:#f4f7f8} /* Polished active-project picker and personnel column header. */ #shiftDraftPanel .shift-toolbar-project{display:block;position:relative;max-width:min(620px,100%)} #shiftDraftPanel .shift-toolbar-project>span:first-child{display:block;margin-bottom:7px;font-size:12px;font-weight:700;letter-spacing:1.2px;color:#607784;text-transform:uppercase} #shiftDraftPanel .shift-project-native-select{display:none!important} #shiftDraftPanel .shift-project-picker{position:relative;width:min(560px,100%)} #shiftDraftPanel .shift-project-picker>summary{display:flex;align-items:center;gap:12px;box-sizing:border-box;min-height:56px;padding:8px 14px;border:1px solid #bdcdd7;border-radius:8px;background:#fff;color:#132e40;cursor:pointer;list-style:none} #shiftDraftPanel .shift-project-picker>summary::-webkit-details-marker{display:none} #shiftDraftPanel .shift-project-picker>summary:hover{border-color:#627f90;background:#f7f9fa} #shiftDraftPanel .shift-project-picker>summary:focus-visible{outline:3px solid #285c7a42;outline-offset:2px} #shiftDraftPanel .shift-project-picker[open]>summary{border-color:#627f90;border-radius:8px 8px 0 0} #shiftDraftPanel .shift-project-picker-icon{width:25px;height:25px;flex:none;fill:none;stroke:#234b61;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #shiftDraftPanel #shiftProjectPickerLabel{min-width:0;overflow:hidden;font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.5px;text-overflow:ellipsis;white-space:nowrap} #shiftDraftPanel .shift-project-picker-chevron{width:20px;height:20px;margin-left:auto;flex:none;fill:none;stroke:#234b61;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease} #shiftDraftPanel .shift-project-picker[open] .shift-project-picker-chevron{transform:rotate(180deg)} #shiftDraftPanel .shift-project-picker-menu{position:absolute;top:calc(100% + 7px);left:0;z-index:40;box-sizing:border-box;width:100%;min-width:360px;padding:10px;border:1px solid #cbd6da;border-radius:10px;background:#fff;box-shadow:0 16px 40px #18334029} #shiftDraftPanel .shift-project-picker-search{position:relative;display:block;margin-bottom:8px} #shiftDraftPanel .shift-project-picker-search svg{position:absolute;left:12px;top:50%;width:20px;height:20px;fill:none;stroke:#607784;stroke-width:1.8;transform:translateY(-50%)} #shiftDraftPanel .shift-project-picker-search input{box-sizing:border-box;width:100%;height:44px;padding:0 12px 0 42px;border:1px solid #cbd6da;border-radius:7px;background:#fff;color:#183340;font:400 15px var(--bs-font-family)} #shiftDraftPanel .shift-project-picker-search input:focus{border-color:#627f90;outline:3px solid #285c7a28} #shiftDraftPanel .shift-project-picker-options{display:grid;gap:3px;max-height:280px;overflow:auto} #shiftDraftPanel .shift-project-picker-options button,#shiftDraftPanel .shift-project-picker-manage{display:grid;grid-template-columns:24px minmax(0,1fr) 22px;align-items:center;gap:11px;width:100%;min-height:48px;padding:9px 11px;border:0;border-radius:7px;background:transparent;color:#183340;text-align:left;cursor:pointer;font:500 16px var(--bs-font-family)} #shiftDraftPanel .shift-project-picker-options button:hover,#shiftDraftPanel .shift-project-picker-options button:focus-visible,#shiftDraftPanel .shift-project-picker-manage:hover,#shiftDraftPanel .shift-project-picker-manage:focus-visible{background:#eef3f5;outline:none} #shiftDraftPanel .shift-project-picker-options button.active{background:#fff1ef;color:#173b50} #shiftDraftPanel .shift-project-picker-options button svg,#shiftDraftPanel .shift-project-picker-manage svg{width:22px;height:22px;fill:none;stroke:#285c7a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #shiftDraftPanel .shift-project-picker-options button i{color:#e7433a;font-size:20px;font-style:normal;text-align:center} #shiftDraftPanel .shift-project-picker-manage{grid-template-columns:24px minmax(0,1fr);margin-top:8px;padding-top:12px;border-top:1px solid #e0e7ea;border-radius:0;color:#536b79;font-size:14px} #shiftPlansView .shift-grid-worker-head-row>.shift-personnel-heading{display:flex;align-items:baseline;gap:7px;order:1;width:auto!important;min-width:0;text-align:left} #shiftPlansView .shift-personnel-heading>span{font-size:var(--bs-text-15);font-weight:600;line-height:1.2} #shiftPlansView .shift-personnel-heading>small{color:#607784;font-size:var(--bs-text-10);font-weight:500;line-height:1.2;text-transform:uppercase;white-space:nowrap} #shiftPlansView .shift-grid-worker-head-row>.shift-grid-add-personnel{order:2;min-height:38px;border-color:#b9c9d0;background:#fff} #shiftPlansView .shift-grid-worker-head-row>.shift-grid-add-personnel:hover:not(:disabled){border-color:#e7433a;background:#fff7f6} #shiftPlansView .shift-grid-worker-head-row>.shift-grid-add-personnel .shift-personnel-plus{width:18px;height:18px;flex-basis:18px} @media(max-width:700px){ #shiftDraftPanel .shift-project-picker{width:100%} #shiftDraftPanel .shift-project-picker-menu{min-width:0} #shiftDraftPanel #shiftProjectPickerLabel{font-size:24px} #shiftPlansView .shift-personnel-heading>small{display:none} } /* Work-plan readability rework: standard sans typography, unclipped menus, history and period browsing. */ #shiftDraftPanel,#shiftDraftPanel button,#shiftDraftPanel input,#shiftDraftPanel select,#shiftPersonnelModal,#shiftPersonnelModal button,#shiftPersonnelModal input,#shiftPersonnelModal select{font-family:var(--bs-font-family,Arial,sans-serif)} #shiftDraftPanel #shiftDraftToolbar{position:relative;z-index:80;overflow:visible} #shiftDraftPanel .shift-draft-title-row{position:relative;z-index:82;overflow:visible} #shiftDraftPanel .shift-draft-controls{position:relative;z-index:1} #shiftDraftPanel .shift-project-picker[open]{z-index:220} #shiftDraftPanel .shift-project-picker-menu{z-index:240;overflow:visible} #shiftDraftPanel .shift-toolbar-project>span:first-child{margin-bottom:7px;color:#405866;font-family:var(--bs-font-family,Arial,sans-serif);font-size:14px;font-weight:650;letter-spacing:0;text-transform:none} #shiftDraftPanel .shift-project-picker-search>span.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} #shiftDraftPanel .shift-project-picker-search input{height:46px!important;padding:0 14px 0 44px!important;font-size:16px!important;line-height:1.4!important;text-indent:0!important} #shiftPlansView .shift-personnel-heading>span{color:#101820;font-family:var(--bs-font-family,Arial,sans-serif);font-size:16px;font-weight:700} #shiftPlansView .shift-personnel-heading>small{font-family:var(--bs-font-family,Arial,sans-serif);font-size:12px;letter-spacing:0;text-transform:none} #shiftDraftPanel .shift-draft-period{display:flex;align-items:center;gap:9px;min-width:0} #shiftDraftPanel .shift-period-arrow,#shiftDraftPanel .shift-period-today{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:44px;border:1px solid #bdcdd7;border-radius:7px;background:#fff;color:#183340;cursor:pointer;font-size:15px;font-weight:600} #shiftDraftPanel .shift-period-arrow{width:44px;padding:0} #shiftDraftPanel .shift-period-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #shiftDraftPanel .shift-period-today{padding:0 16px} #shiftDraftPanel .shift-period-arrow:hover,#shiftDraftPanel .shift-period-today:hover{border-color:#627f90;background:#f3f6f7} #shiftDraftPanel .shift-toolbar-range{display:flex;align-items:center;min-height:44px;box-sizing:border-box;flex:0 1 auto;padding:0 15px;border:1px solid #bdcdd7;border-radius:7px;background:#fff;color:#183340;font-size:15px;font-weight:600;white-space:nowrap} #shiftDraftPanel .shift-toolbar-weeks select{height:44px;min-width:108px;font-size:15px} #shiftDraftPanel .shift-undo-control{position:relative;display:flex;align-items:stretch} #shiftDraftPanel .shift-undo-button{border-radius:7px 0 0 7px} #shiftDraftPanel .shift-undo-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #shiftDraftPanel .shift-undo-menu{position:relative} #shiftDraftPanel .shift-undo-menu>summary{display:grid;place-items:center;box-sizing:border-box;width:38px;height:100%;min-height:42px;border:1px solid #bdcdd7;border-left:0;border-radius:0 7px 7px 0;background:#fff;color:#183340;cursor:pointer;list-style:none;font:700 16px var(--bs-font-family,Arial,sans-serif)} #shiftDraftPanel .shift-undo-menu>summary::-webkit-details-marker{display:none} #shiftDraftPanel .shift-undo-menu-body{position:absolute;top:calc(100% + 8px);right:0;z-index:260;width:min(360px,calc(100vw - 32px));padding:14px;border:1px solid #c7d3d8;border-radius:10px;background:#fff;box-shadow:0 18px 42px rgba(20,45,58,.2)} #shiftDraftPanel .shift-undo-menu-body>strong{display:block;margin-bottom:9px;color:#183340;font-size:17px} #shiftDraftPanel #shiftUndoList{display:grid;gap:3px} #shiftDraftPanel #shiftUndoList button,#shiftDraftPanel #shiftRedoButton{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:48px;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:#183340;text-align:left;cursor:pointer} #shiftDraftPanel #shiftUndoList button:hover,#shiftDraftPanel #shiftRedoButton:hover:not(:disabled){background:#eef3f5} #shiftDraftPanel #shiftUndoList strong{font-size:15px;font-weight:650} #shiftDraftPanel #shiftUndoList small{margin-top:3px;color:#607784;font-size:13px} #shiftDraftPanel #shiftUndoList p{margin:8px 4px;color:#607784;font-size:14px} #shiftDraftPanel #shiftRedoButton{display:block;margin-top:8px;border-top:1px solid #e0e7ea;border-radius:0;font-size:15px;font-weight:600} #shiftDraftPanel .shift-undo-menu-body>small{display:block;padding:8px 10px 2px;color:#738690;font-size:12px} #shiftDraftPanel .shift-undo-button:disabled,#shiftDraftPanel #shiftRedoButton:disabled{opacity:.48;cursor:not-allowed} #shiftPersonnelModal .shift-personnel-dialog{width:min(1380px,96vw);max-height:min(900px,94vh);overflow:auto} #shiftPersonnelModal .shift-personnel-dialog>header{padding:24px 30px 20px} #shiftPersonnelModal .shift-personnel-dialog>header p{font-family:var(--bs-font-family,Arial,sans-serif);font-size:13px;letter-spacing:.08em} #shiftPersonnelModal .shift-personnel-dialog>header h2{font-family:var(--bs-font-family,Arial,sans-serif);font-size:28px;line-height:1.2} #shiftPersonnelModal .shift-personnel-dialog>header span{font-size:15px;line-height:1.5} #shiftPersonnelModal .shift-personnel-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:13px 30px;border-bottom:1px solid #dce4e8;background:#fbfcfc} #shiftPersonnelModal .shift-personnel-steps span{display:flex;align-items:center;gap:9px;color:#607784;font-size:14px;font-weight:600} #shiftPersonnelModal .shift-personnel-steps b{display:grid;place-items:center;width:28px;height:28px;border:1px solid #bdcdd7;border-radius:50%;background:#fff;color:#405866} #shiftPersonnelModal .shift-personnel-steps .active{color:#183340} #shiftPersonnelModal .shift-personnel-steps .active b{border-color:#183340;background:#183340;color:#fff} #shiftPersonnelModal .shift-personnel-body{grid-template-columns:minmax(360px,.85fr) minmax(570px,1.15fr);min-height:500px} #shiftPersonnelModal .shift-personnel-body>section{padding:24px 28px} #shiftPersonnelModal .shift-personnel-workers>label>span,#shiftPersonnelModal .shift-personnel-setup>label>span,#shiftPersonnelModal .shift-personnel-end-date label>span{color:#243f4e;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none} #shiftPersonnelModal .shift-personnel-workers input[type=search],#shiftPersonnelModal .shift-personnel-setup select,#shiftPersonnelModal .shift-personnel-setup input[type=date],#shiftPersonnelModal .shift-personnel-end-date input[type=date]{height:48px;font-size:16px} #shiftPersonnelModal .shift-personnel-filters{display:flex;gap:8px;margin:12px 0} #shiftPersonnelModal .shift-personnel-filters button{min-height:38px;padding:0 15px;border:1px solid #c9d5da;border-radius:20px;background:#fff;color:#405866;font-size:14px;cursor:pointer} #shiftPersonnelModal .shift-personnel-filters button.active{border-color:#a9c3d4;background:#e7f1f8;color:#183340;font-weight:700} #shiftPersonnelModal .shift-personnel-options{max-height:390px;margin-top:0} #shiftPersonnelModal .shift-personnel-options .shift-worker-picker-option{min-height:66px;padding-top:8px;padding-bottom:8px} #shiftPersonnelModal .shift-personnel-options .filter-hidden{display:none!important} #shiftPersonnelModal .shift-personnel-setup{grid-template-columns:1fr 1fr;gap:16px} #shiftPersonnelModal .shift-personnel-end-date{display:grid;align-content:start;gap:6px} #shiftPersonnelModal .shift-personnel-end-date>button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;border:1px solid #bdcdd7;border-radius:7px;background:#fff;color:#183340;font-size:15px;font-weight:650;cursor:pointer} #shiftPersonnelModal .shift-personnel-end-date>button:hover{border-color:#627f90;background:#f5f8fa} #shiftPersonnelModal .shift-personnel-end-date>small{color:#607784;font-size:13px;line-height:1.4} #shiftPersonnelModal .shift-personnel-end-date label{display:grid;gap:6px} #shiftPersonnelModal .shift-personnel-info{padding:17px 18px} #shiftPersonnelModal .shift-personnel-info b{font-size:15px} #shiftPersonnelModal .shift-personnel-info p{font-size:14px} #shiftPersonnelModal .shift-personnel-preview-head{font-size:15px} #shiftPersonnelModal .shift-personnel-calendar{gap:6px} #shiftPersonnelModal .shift-personnel-calendar>div{min-height:58px} #shiftPersonnelModal .shift-personnel-calendar>div span{font-size:12px} #shiftPersonnelModal .shift-personnel-calendar>div b{font-size:15px} #shiftPersonnelModal .shift-personnel-setup>[data-personnel-preview]>p{font-size:13px} #shiftPersonnelModal .shift-personnel-dialog>footer{align-items:center;justify-content:space-between;padding:16px 28px} #shiftPersonnelModal .shift-personnel-dialog>footer>span{color:#405866;font-size:15px;font-weight:600} #shiftPersonnelModal .shift-personnel-dialog>footer>div{display:flex;gap:10px} @media(max-width:900px){ #shiftDraftPanel .shift-draft-period{flex-wrap:wrap} #shiftDraftPanel .shift-toolbar-range{order:-1;width:100%} #shiftPersonnelModal .shift-personnel-body{grid-template-columns:1fr} #shiftPersonnelModal .shift-personnel-workers{border-right:0;border-bottom:1px solid #dce4e8} #shiftPersonnelModal .shift-personnel-steps{padding:12px 16px} } @media(max-width:620px){ #shiftDraftPanel .shift-period-arrow{width:42px} #shiftDraftPanel .shift-period-today{padding:0 12px} #shiftDraftPanel .shift-toolbar-range{font-size:14px} #shiftDraftPanel .shift-undo-control{order:-1} #shiftPersonnelModal .shift-personnel-steps span{font-size:0} #shiftPersonnelModal .shift-personnel-steps b{font-size:14px} #shiftPersonnelModal .shift-personnel-setup{grid-template-columns:1fr} #shiftPersonnelModal .shift-personnel-info,#shiftPersonnelModal .shift-personnel-setup>[data-personnel-preview]{grid-column:auto} #shiftPersonnelModal .shift-personnel-dialog>footer{align-items:stretch;flex-direction:column} #shiftPersonnelModal .shift-personnel-dialog>footer>div{display:grid;grid-template-columns:1fr 1fr} } /* Review refinements: enforce approved UI typeface and align compact controls. */ #shiftPlansView .shift-grid-worker-name-copy strong, #shiftPlansView #shiftOfficialPreview .shift-worker-copy strong, #shiftPersonnelModal .shift-worker-picker-option strong{ font-family:var(--bs-font-family,Arial,sans-serif)!important; font-size:15px!important; font-weight:600!important; font-stretch:normal!important; letter-spacing:0!important; } #shiftPlansView .shift-worker-person-meta, #shiftPersonnelModal .shift-worker-picker-option small{ font-family:var(--bs-font-family,Arial,sans-serif)!important; font-size:13px!important; font-weight:400!important; font-stretch:normal!important; letter-spacing:0!important; } #shiftPersonnelModal .shift-personnel-end-date{grid-column:2;grid-row:2} #shiftPlansView .shift-grid-worker-head-row>.shift-personnel-heading{ flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; } #shiftPlansView .shift-personnel-heading>small{ display:block; max-width:100%; color:#607784; line-height:1.25; white-space:normal; } #shiftDraftPanel .shift-undo-menu>summary svg{ display:block; width:24px; height:24px; margin:auto; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; } @media(max-width:620px){ #shiftPersonnelModal .shift-personnel-end-date{grid-column:auto;grid-row:auto} } /* Compact project-period popover: overlays the plan without creating a table row. */ #shiftPlansView .shift-worker-name-cell{overflow:visible} body .shift-allocation-popover{ position:fixed; z-index:420; box-sizing:border-box; width:min(420px,calc(100vw - 32px)); padding:20px; border:1px solid #cbd7dc; border-radius:9px; background:#fff; box-shadow:0 18px 45px rgba(20,45,58,.22); color:#183340; text-align:left; white-space:normal; } body .shift-allocation-popover.hidden{display:none} body .shift-allocation-popover>header{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px;padding:0} body .shift-allocation-popover>header h3{margin:0;font-family:var(--bs-font-family,Arial,sans-serif);font-size:20px;line-height:1.25} body .shift-allocation-popover>header>button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:#607784;font:400 26px/1 var(--bs-font-family,Arial,sans-serif);cursor:pointer} body .shift-allocation-popover>header>button:hover{background:#eef3f5;color:#183340} body .shift-allocation-popover .shift-allocation-date-fields{display:grid;grid-template-columns:1fr;gap:13px;padding:0} body .shift-allocation-popover label>span{display:block;margin:0 0 6px;color:#405866;font-family:var(--bs-font-family,Arial,sans-serif);font-size:14px;font-weight:650;text-transform:none} body .shift-allocation-popover input[type=date]{box-sizing:border-box;width:100%;height:46px;padding:0 12px;border:1px solid #bdcdd7;border-radius:7px;background:#fff;color:#183340;font:400 16px var(--bs-font-family,Arial,sans-serif)} body .shift-allocation-popover>p{margin:14px 0;color:#607784;font:400 14px/1.45 var(--bs-font-family,Arial,sans-serif)} body .shift-allocation-popover>footer{display:flex;justify-content:flex-end;gap:10px;margin:0;padding:14px 0 0;border-top:1px solid #e0e7ea} body .shift-allocation-popover>footer button{min-height:42px;padding:0 16px;font-family:var(--bs-font-family,Arial,sans-serif);font-size:14px} @media(max-width:560px){ body .shift-allocation-popover{padding:16px} } /* Keep hotel loading independent of the legacy page-level .loading panel. */ .shift-worker-hotel-status.hotel-indicator-loading{opacity:.55;color:#87969d} body .shift-allocation-popover{max-height:calc(100dvh - 32px);overflow:auto;text-align:left;text-transform:none;letter-spacing:normal;font:400 14px/1.45 var(--bs-font-family,Arial,sans-serif)} body .shift-allocation-popover h3,body .shift-allocation-popover p{text-transform:none;letter-spacing:normal} body .shift-allocation-popover>header{align-items:flex-start;gap:12px} body .shift-allocation-popover>header>div{min-width:0} body .shift-allocation-popover .shift-allocation-person{margin:6px 0 0;color:#405866;font:500 16px/1.4 var(--bs-font-family,Arial,sans-serif);overflow-wrap:anywhere;text-transform:none;letter-spacing:normal} /* Compact personnel workflow and status explanations. */ #shiftPersonnelModal .shift-personnel-dialog{box-sizing:border-box;width:min(1040px,96vw);max-width:100%;max-height:94dvh;font-family:var(--bs-font-family,Arial,sans-serif)} #shiftPersonnelModal .shift-personnel-dialog>header>div{min-width:0;overflow-wrap:anywhere} #shiftPersonnelModal .shift-personnel-dialog>header>button{box-sizing:border-box;flex:none;min-width:34px;min-height:34px} #shiftPersonnelModal .shift-personnel-body{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:0} #shiftPersonnelModal .shift-personnel-setup{grid-template-columns:repeat(2,minmax(0,1fr))} #shiftPersonnelModal .shift-personnel-setup>label{align-content:start} #shiftPersonnelModal .shift-personnel-setup>label:first-child{grid-column:1/-1} #shiftPersonnelModal .shift-personnel-end-date{grid-column:auto;grid-row:auto} #shiftPersonnelModal .shift-personnel-end-date small{color:#536c79;font:400 16px/1.45 var(--bs-font-family,Arial,sans-serif)} #shiftPersonnelModal .shift-personnel-info p, #shiftPersonnelModal .shift-personnel-setup>[data-personnel-preview]>p, #shiftPersonnelModal .shift-personnel-hotel-note{font:400 16px/1.5 var(--bs-font-family,Arial,sans-serif)} #shiftPersonnelModal .shift-personnel-save-status{margin:0;padding:12px 28px;border-top:1px solid #dce4e8;background:#f2f7fa;color:#183340;font:400 16px/1.5 var(--bs-font-family,Arial,sans-serif)} #shiftPersonnelModal .shift-personnel-save-status[role=alert]{background:#fff4ed;color:#703a27} #shiftWorkerRowMenu .shift-worker-menu-plan-travel h4{margin:6px 8px 0;color:#607681;font:600 14px/1.4 var(--bs-font-family,Arial,sans-serif)} #shiftWorkerRowMenu .shift-worker-menu-plan-travel>button{box-sizing:border-box;display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 10px;border:0;border-radius:7px;background:#fff;color:var(--ink);text-align:left;cursor:pointer} #shiftWorkerRowMenu .shift-worker-menu-plan-travel>button:hover{background:#f1f5f6} #shiftWorkerRowMenu .shift-worker-menu-section>button.danger{color:#a53d39} body .shift-allocation-popover .shift-allocation-date-fields small{display:block;margin-top:5px;color:#536c79;font:400 16px/1.4 var(--bs-font-family,Arial,sans-serif)} #shiftDraftPanel td[data-locked-reason]{cursor:help} .shift-worker-travel-status.pending,.shift-worker-hotel-status.pending{color:#ba6c1a} .shift-worker-travel-status.booked{color:#2676a5} .shift-worker-hotel-status.booked{color:#26784f} .shift-worker-travel-status.changed,.shift-worker-hotel-status.changed{color:#b14d30} @media(max-width:750px){ #shiftPersonnelModal .shift-personnel-dialog{width:100%;max-height:calc(100dvh - 16px)} #shiftPersonnelModal .shift-personnel-body, #shiftPersonnelModal .shift-personnel-setup{grid-template-columns:minmax(0,1fr)} #shiftPersonnelModal .shift-personnel-end-date{grid-column:auto;grid-row:auto} #shiftPersonnelModal .shift-personnel-dialog>footer{gap:10px} #shiftPersonnelModal .shift-personnel-dialog>footer>div{grid-template-columns:repeat(2,minmax(0,1fr))} }