/* VeriCuda UI refresh: shared look (see the "VeriCuda UI Refresh" design canvas).
   "vc-" classes are the new components. The "App-wide colour scheme" section at the end
   restyles Bootstrap and older page styles on every page. */
:root {
  --vc-navy: #2B2873;
  --vc-teal: #00708F;
  --vc-teal-wash: #E6F2F6;
  --vc-ground: #F4F6F7;
  --vc-surface: #FFFFFF;
  --vc-line: #D5DCDF;
  --vc-line-soft: #E9EDEF;
  --vc-ink: #17303B;
  --vc-ink-soft: #4A5B63;
  --vc-critical: #B3122A;
  --vc-major: #9A5B00;
  --vc-minor: #1C6B52;
  --vc-font: 'IBM Plex Sans', system-ui, sans-serif;
  --vc-font-head: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
}
.vc-page { font-family: var(--vc-font); color: var(--vc-ink); font-size: 14px; line-height: 1.5; max-width: 1120px; margin: 0 auto; padding: 8px 4px 48px; display: flex; flex-direction: column; gap: 22px; }
.vc-page a { color: var(--vc-teal); }
.vc-page a:hover { color: var(--vc-navy); }
.vc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.vc-overline { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--vc-ink-soft); }
.vc-h1 { margin: 0; font-family: var(--vc-font-head); font-weight: 600; font-size: 32px; line-height: 1.15; color: var(--vc-navy); }
.vc-h2 { margin: 0; font-family: var(--vc-font-head); font-weight: 600; font-size: 18px; color: var(--vc-ink); }
.vc-card { background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: 10px; }
.vc-pad { padding: 18px 20px; }
.vc-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--vc-line); border-radius: 22px; background: var(--vc-surface); color: var(--vc-ink) !important; font-weight: 600; text-decoration: none; }
.vc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vc-teal); flex: none; }
.vc-label { display: block; font-weight: 600; margin-bottom: 8px; }
.vc-searchbox { display: flex; align-items: center; gap: 12px; border: 2px solid var(--vc-teal); border-radius: 8px; padding: 0 14px; min-height: 52px; background: var(--vc-surface); }
.vc-searchbox input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 16px; color: var(--vc-ink); background: transparent; max-width: none !important; }
.vc-searchbox input::placeholder { color: #67787F; }
.vc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.vc-chip { min-height: 40px; padding: 0 14px; border-radius: 20px; font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--vc-line); background: var(--vc-surface); color: var(--vc-ink); }
.vc-chip[aria-pressed="true"] { border-color: var(--vc-navy); background: var(--vc-navy); color: #FFFFFF; }
.vc-chip .vc-count { opacity: 0.8; margin-left: 4px; }
.vc-select { min-height: 40px; padding: 0 10px; border: 1px solid var(--vc-line); border-radius: 6px; background: var(--vc-surface); font: inherit; color: var(--vc-ink); }
.vc-cols { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.vc-main-col { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vc-side-col { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.vc-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--vc-line-soft); }
.vc-row:last-child { border-bottom: 0; }
.vc-icon { width: 36px; height: 36px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; }
.vc-icon-form { background: #FBF3E6; color: var(--vc-major); }
.vc-icon-doc { background: var(--vc-teal-wash); color: var(--vc-teal); }
.vc-icon-obs { background: #EDECF6; color: var(--vc-navy); }
.vc-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vc-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-row-meta { font-size: 13px; color: var(--vc-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Home: completed tasks folded under one "Done today (n)" line */
.vc-done-toggle { width: 100%; text-align: left; background: #F4F6F7; border: 0; border-top: 1px solid var(--vc-line-soft); padding: 10px 16px; font: inherit; font-size: 13px; font-weight: 600; color: var(--vc-ink-soft); cursor: pointer; }
.vc-done-toggle:hover { color: var(--vc-ink); }
.vc-row-done { opacity: 0.75; }
.vc-row-done .vc-row-title { text-decoration: line-through; text-decoration-color: var(--vc-line); }
.vc-icon-done { background: #E6F2EE; color: #1C6B52; font-weight: 700; }
.vc-when { font-size: 13px; color: var(--vc-ink-soft); white-space: nowrap; }
.vc-btn-outline { min-height: 40px; padding: 0 14px; border: 1px solid var(--vc-teal); border-radius: 6px; background: var(--vc-surface); color: var(--vc-teal); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.vc-btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 8px; background: var(--vc-navy); color: #FFFFFF !important; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.vc-empty { padding: 40px 20px; text-align: center; color: var(--vc-ink-soft); }
.vc-badge { font-size: 12px; font-weight: 600; color: #FFFFFF; border-radius: 4px; padding: 1px 6px; }
.vc-badge-critical { background: var(--vc-critical); }
.vc-badge-major { background: var(--vc-major); }
.vc-badge-minor { background: var(--vc-minor); }
.vc-badge-other { background: var(--vc-ink-soft); }
.vc-assigned { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid var(--vc-line-soft); text-decoration: none; color: var(--vc-ink) !important; cursor: pointer; }
.vc-assigned:last-child { border-bottom: 0; }
.vc-note { margin: 0; font-size: 12px; color: #67787F; }
@media (max-width: 640px) {
  .vc-h1 { font-size: 26px; }
  .vc-row { flex-wrap: wrap; }
  .vc-when { order: 3; }
}
.vc-icon-meeting { background: #EEF4EC; color: #1C6B52; }
.vc-icon-capa { background: #FBEFF1; color: #B3122A; }
.vc-status { font-size: 12px; font-weight: 600; border-radius: 12px; padding: 2px 10px; white-space: nowrap; border: 1px solid transparent; }
.vc-status-overdue { background: #FBEFF1; color: #8C0E21; border-color: #EBCBD2; }
.vc-status-due { background: #EDECF6; color: #2B2873; border-color: #D6D4EC; }
.vc-status-pending { background: #FBF3E6; color: #7A4800; border-color: #E9D3AE; }
.vc-status-done { background: #E6F2F6; color: #005A73; border-color: #C3DDE6; }
.vc-status-approved { background: #E7F2EC; color: #145240; border-color: #BFDCCD; }
.vc-sched-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.vc-fieldset { border: 1px solid var(--vc-line); border-radius: 8px; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vc-fieldset legend { font-weight: 600; font-size: 14px; padding: 0 4px; width: auto; margin: 0; }
.vc-fieldset label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.vc-field { flex-direction: column; align-items: stretch !important; gap: 4px !important; font-size: 13px; color: var(--vc-ink-soft); }
.vc-input { min-height: 40px; padding: 0 10px; border: 1px solid #A3AFB5; border-radius: 6px; font: inherit; color: var(--vc-ink); background: var(--vc-surface); max-width: none !important; width: 100%; box-sizing: border-box; }
.vc-checklist { max-height: 190px; overflow-y: auto; border: 1px solid var(--vc-line-soft); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.vc-sub { font-size: 12px; color: var(--vc-ink-soft); }
.vc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vc-table th { text-align: left; font-weight: 600; color: var(--vc-ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--vc-line); white-space: nowrap; }
.vc-table td { padding: 8px; border-bottom: 1px solid var(--vc-line-soft); vertical-align: middle; }

/* =====================================================================
   Sidebar layout (MainLayout + NavMenu)
   ===================================================================== */
:root { --vc-navy-dark: #201E5A; --vc-navy-wash: #ECEBF5; --vc-ink-faint: #67787F; --vc-sidebar-w: 248px; }
.vc-shell { display: flex; min-height: 100vh; align-items: stretch; }
.vc-shell.vc-shell-public { display: block; }
.vc-shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vc-shell-main > main { flex: 1; padding-top: 20px; }
.vc-shell .footer { position: static; line-height: 1.5; padding: 14px 0; white-space: normal; background: transparent; font-size: 13px; }

.vc-sidebar { position: sticky; top: 0; height: 100vh; width: var(--vc-sidebar-w); flex: none; background: var(--vc-surface); border-right: 1px solid var(--vc-line); display: flex; flex-direction: column; z-index: 1030; font-family: var(--vc-font); font-size: 14px; }
.vc-sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 16px 10px; }
.vc-brand { display: inline-flex; align-items: center; }
.vc-brand img { height: 40px; width: auto; max-width: 180px; }
.vc-menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--vc-line); border-radius: 8px; background: var(--vc-surface); color: var(--vc-ink); cursor: pointer; }
.vc-sidebar-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 4px 12px 14px; }
.vc-site { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--vc-line); border-radius: 20px; color: var(--vc-ink) !important; font-weight: 600; text-decoration: none !important; }
.vc-site:hover { border-color: var(--vc-teal); }
.vc-site-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-nav { display: flex; flex-direction: column; gap: 2px; }
.vc-nav-link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 6px; color: var(--vc-ink) !important; text-decoration: none !important; font-weight: 500; }
.vc-nav-link:hover { background: var(--vc-line-soft); }
.vc-nav-link.active { background: var(--vc-navy); color: #FFFFFF !important; font-weight: 600; }
.vc-icon { flex: none; width: 18px; height: 18px; }
.vc-nav-group { display: flex; flex-direction: column; gap: 1px; border-top: 1px solid var(--vc-line-soft); padding-top: 10px; }
.vc-nav-heading { padding: 0 12px 4px; font-size: 12px; font-weight: 600; color: var(--vc-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.vc-nav-sub { display: block; padding: 7px 12px; border-radius: 6px; color: var(--vc-ink) !important; text-decoration: none !important; }
.vc-nav-sub:hover { background: var(--vc-line-soft); }
.vc-nav-sub.active { background: var(--vc-navy-wash); color: var(--vc-navy) !important; font-weight: 600; }
.vc-sidebar-foot { margin-top: auto; position: sticky; bottom: -14px; background: var(--vc-surface); border-top: 1px solid var(--vc-line-soft); padding: 10px 0 14px; display: flex; flex-direction: column; gap: 4px; }
.vc-notify-btn, .vc-logout { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font: inherit; color: var(--vc-ink); cursor: pointer; text-align: left; width: 100%; }
.vc-notify-btn:hover, .vc-logout:hover { background: var(--vc-line-soft); }
.vc-notify-count { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 11px; background: var(--vc-critical); color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.vc-user { display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.vc-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--vc-teal-wash); color: var(--vc-teal); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none; }
.vc-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.vc-user-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-user-sub { font-size: 12px; color: var(--vc-ink-faint); }

.vc-notify-panel { position: fixed; left: calc(var(--vc-sidebar-w) + 8px); bottom: 16px; z-index: 1040; }
.vc-notify-panel #right-menu { position: static; left: auto; top: auto; width: 380px; max-width: calc(100vw - 32px); max-height: 75vh; overflow-y: auto; border: 1px solid var(--vc-line); border-radius: 10px !important; box-shadow: 0 10px 28px rgba(23, 48, 59, 0.18); }
.vc-notify-panel #right-menu::before { display: none; }

.vc-topbar-public { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--vc-surface); border-bottom: 1px solid var(--vc-line); }
.vc-topbar-public img { height: 40px; width: auto; }

@media (max-width: 900px) {
  .vc-shell { flex-direction: column; }
  .vc-sidebar { width: 100%; height: auto; max-height: 100vh; border-right: 0; border-bottom: 1px solid var(--vc-line); }
  .vc-sidebar-top { padding: 10px 16px; }
  .vc-brand img { height: 34px; }
  .vc-menu-toggle { display: inline-flex; }
  .vc-sidebar-body { display: none; max-height: calc(100vh - 64px); }
  .vc-sidebar-open .vc-sidebar-body { display: flex; }
  .vc-notify-panel { left: 16px; right: 16px; }
  .vc-notify-panel #right-menu { width: auto; }
  .vc-shell-main > main { padding-top: 12px; }
}

/* =====================================================================
   App-wide colour scheme (overrides Bootstrap and older page styles)
   Brand: navy #2B2873 for main actions, teal #00708F for links and info.
   ===================================================================== */
body { font-family: var(--vc-font); color: var(--vc-ink); background: var(--vc-ground); margin-bottom: 0; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: var(--vc-font-head); }
a { color: var(--vc-teal); }
a:hover { color: var(--vc-navy); }
.text-primary { color: var(--vc-navy) !important; }
.text-info { color: var(--vc-teal) !important; }
.bg-primary, .badge-primary { background-color: var(--vc-navy) !important; color: #FFFFFF; }
.bg-info, .badge-info { background-color: var(--vc-teal) !important; color: #FFFFFF; }
.border-primary { border-color: var(--vc-navy) !important; }

.btn { border-radius: 8px; font-weight: 600; }
.btn.btn-primary, .btn.btn-primary:disabled, .btn.btn-primary.disabled { background-color: var(--vc-navy); border-color: var(--vc-navy); color: #FFFFFF; }
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active,
.btn.btn-primary:not(:disabled):not(.disabled):active, .btn.btn-primary:hover, .btn.btn-primary:active { background-color: var(--vc-navy-dark) !important; border-color: var(--vc-navy-dark) !important; color: #FFFFFF; }
.btn.btn-primary:focus, .btn.btn-outline-primary:focus { box-shadow: 0 0 0 0.2rem rgba(43, 40, 115, 0.3); }
.btn.btn-outline-primary { color: var(--vc-navy); border-color: var(--vc-navy); }
.btn.btn-outline-primary:hover, .btn.btn-outline-primary:active, .btn.btn-outline-primary.active { background-color: var(--vc-navy) !important; border-color: var(--vc-navy) !important; color: #FFFFFF !important; }
.btn.btn-info { background-color: var(--vc-teal); border-color: var(--vc-teal); color: #FFFFFF; }
.btn.btn-info:hover, .btn.btn-info:focus, .btn.btn-info:active { background-color: #005A73 !important; border-color: #005A73 !important; color: #FFFFFF; }
.btn.btn-outline-info { color: var(--vc-teal); border-color: var(--vc-teal); }
.btn.btn-outline-info:hover { background-color: var(--vc-teal); color: #FFFFFF; }
.btn.btn-secondary { background-color: var(--vc-surface); border-color: #A3AFB5; color: var(--vc-ink); }
.btn.btn-secondary:hover, .btn.btn-secondary:focus, .btn.btn-secondary:active { background-color: var(--vc-line-soft) !important; border-color: #A3AFB5 !important; color: var(--vc-ink) !important; }
.btn.btn-success { background-color: var(--vc-minor); border-color: var(--vc-minor); }
.btn.btn-success:hover, .btn.btn-success:active { background-color: #15553F !important; border-color: #15553F !important; }
.btn.btn-danger { background-color: var(--vc-critical); border-color: var(--vc-critical); }
.btn.btn-danger:hover, .btn.btn-danger:active { background-color: #8C0E21 !important; border-color: #8C0E21 !important; }
.btn-link { color: var(--vc-teal); }

.form-control, .custom-select { border-color: var(--vc-line); border-radius: 6px; color: var(--vc-ink); }
.form-control:focus, .custom-select:focus { border-color: var(--vc-teal); box-shadow: 0 0 0 0.2rem rgba(0, 112, 143, 0.18); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--vc-navy); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--vc-navy); border-color: var(--vc-navy); }

.card { border-color: var(--vc-line); border-radius: 10px; }
.card-header { background-color: var(--vc-surface); border-bottom-color: var(--vc-line-soft); font-weight: 600; color: var(--vc-ink); }
.table thead th { background-color: var(--vc-ground); color: var(--vc-ink-soft); border-bottom: 1px solid var(--vc-line); font-weight: 600; }
.table td, .table th { border-color: var(--vc-line-soft); }
.table-hover tbody tr:hover { background-color: #F7F9FA; }

.nav-tabs { border-bottom-color: var(--vc-line); }
.nav-tabs .nav-link { color: var(--vc-ink-soft); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--vc-navy) !important; background-color: var(--vc-surface) !important; border-color: var(--vc-line) var(--vc-line) var(--vc-surface); font-weight: 600; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--vc-navy); border-color: var(--vc-navy); }
.page-link { color: var(--vc-teal); }
.page-item.active .page-link { background-color: var(--vc-navy); border-color: var(--vc-navy); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--vc-navy); }
.modal-content { border-radius: 10px; border-color: var(--vc-line); }
.modal-header { border-bottom-color: var(--vc-line-soft); }
.modal-title { font-family: var(--vc-font-head); color: var(--vc-navy); font-weight: 600; }
.alert-info { background-color: var(--vc-teal-wash); border-color: #B9DCE6; color: #0B4A5C; }
.progress-bar { background-color: var(--vc-teal); }

/* Older AdminLTE-style boxes (form builder and some lists) */
.box { border-radius: 10px; border-top-color: var(--vc-navy); }
.box.box-primary { border-top-color: var(--vc-navy); }
.box.box-info { border-top-color: var(--vc-teal); }

/* Home page tiles (from the classic dashboard) */
.vc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0; padding: 0 !important; }
.vc-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--vc-surface); border: 1px solid var(--vc-line); border-left: 4px solid var(--vc-navy); border-radius: 10px; color: var(--vc-ink) !important; text-decoration: none !important; }
.vc-tile:hover { border-color: var(--vc-teal); border-left-color: var(--vc-teal); box-shadow: 0 2px 8px rgba(23, 48, 59, 0.08); }
.vc-tile-obs { border-left-color: var(--vc-critical); }
.vc-tile-approve { border-left-color: var(--vc-teal); }
.vc-tile-num { font-family: var(--vc-font-head); font-size: 32px; font-weight: 600; line-height: 1.1; color: var(--vc-navy); }
.vc-tile-label { font-weight: 600; }
.vc-tile-sub { font-size: 12px; color: var(--vc-ink-soft); }
.vc-nav-more { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 32px; border: 0; background: transparent; cursor: pointer; text-align: left; font-family: inherit; }
.vc-nav-more:hover { color: var(--vc-ink); }

/* Form rules: builder panel and fill-in page */
.vc-rules { margin-top: 8px; border-top: 1px dashed var(--vc-line-soft); padding-top: 6px; font-size: 12px; }
.vc-rules-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--vc-ink); cursor: pointer; text-align: left; }
.vc-rules-code { display: inline-block; padding: 0 6px; border-radius: 4px; background: #E6F2F6; color: #00708F; font-weight: 700; }
.vc-rules-body { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 4px; }
.vc-rules-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vc-rules-label { min-width: 170px; color: var(--vc-ink-soft); }
.vc-rules-field { width: auto; min-width: 180px; max-width: 100%; }
.vc-rules-op, .vc-rules-value { width: auto; min-width: 120px; max-width: 100%; }
.vc-rules-formula { width: 200px; max-width: 100%; }
.vc-rules-num { width: 64px; display: inline-block; margin-left: 4px; }
.vc-rules-inline { display: inline-flex; align-items: center; margin: 0; }
.vc-rules-check { gap: 8px; cursor: pointer; }
.vc-calculated { background: #F4F6F7; }
.vc-limit-warning { margin-top: 4px; padding: 4px 8px; border-radius: 4px; background: #FBEFF1; color: #8C0E21; font-size: 13px; font-weight: 600; }

/* Shift logs ("every X minutes" checks) */
.vc-shiftbar { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--vc-line); border-left: 4px solid var(--vc-teal); border-radius: 10px; background: var(--vc-surface); display: flex; flex-direction: column; gap: 10px; font-family: var(--vc-font); }
.vc-shiftbar.is-due { border-left-color: #9A5B00; background: #FFF8EC; }
.vc-shiftbar.is-late { border-left-color: var(--vc-critical); background: #FBEFF1; }
.vc-shiftbar-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.vc-shiftbar-title { flex: 1 1 220px; display: flex; flex-direction: column; }
.vc-shiftbar-next { font-weight: 700; font-size: 16px; color: var(--vc-ink); }
.vc-shiftbar.is-due .vc-shiftbar-next { color: #7A4800; }
.vc-shiftbar.is-late .vc-shiftbar-next { color: #8C0E21; }
.vc-shiftbar-add { padding: 0 16px; min-height: 44px; }
.vc-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vc-slot { min-width: 52px; padding: 3px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; text-align: center; border: 1px solid var(--vc-line); color: var(--vc-ink-soft); background: var(--vc-surface); }
.vc-slot-done { background: #E7F3EE; border-color: #9FCDBB; color: #15553F; }
.vc-slot-due { background: #FFF1D6; border-color: #E5B567; color: #7A4800; }
.vc-slot-late, .vc-slot-missed { background: #FBEFF1; border-color: #E3A3AE; color: #8C0E21; }
.vc-slot-missed { text-decoration: line-through; }
.vc-slot-latedone { background: #FFF1D6; border-color: #E5B567; color: #7A4800; border-style: dashed; }
.vc-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1060; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 32px); width: 340px; }
.vc-toast { background: var(--vc-surface); border: 1px solid var(--vc-line); border-left: 4px solid #9A5B00; border-radius: 10px; box-shadow: 0 10px 28px rgba(23, 48, 59, 0.18); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-family: var(--vc-font); }
.vc-toast-text { display: flex; flex-direction: column; }
.vc-toast-actions { display: flex; gap: 8px; }
.vc-toast-link { border: 0; background: transparent; padding: 0; color: var(--vc-teal); text-align: left; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
/* Home: shift check progress */
.vc-shiftprog { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.vc-shiftprog-bar { flex: 0 0 140px; height: 6px; border-radius: 3px; background: var(--vc-line-soft); overflow: hidden; }
.vc-shiftprog-bar > span { display: block; height: 100%; background: #1F8A66; }
.vc-shiftprog-text { font-size: 12px; color: var(--vc-ink-soft); }
/* Late submission reason (form page) */
.vc-late-box { margin: 12px 0; padding: 10px 14px; border: 1px solid #E5B567; border-left: 4px solid #E5B567; border-radius: 8px; background: #FFF8EA; color: #5C3A00; }
/* ---- Observations: list (Index.razor) - look only, same buttons and actions ---- */
.vc-obs { font-family: var(--vc-font); color: var(--vc-ink); font-size: 14px; display: flex; flex-direction: column; gap: 14px; padding: 4px 4px 32px; }
.vc-obs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; }
.vc-obs-actions-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vc-obs-actions-top .vc-btn-primary { min-height: 40px; padding: 0 16px; }
.vc-obs-actions-top .vc-chip i { font-size: 14px; color: inherit; margin-right: 4px; }
.vc-obs-closed { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; }
.vc-obs-closed input { margin: 0; accent-color: var(--vc-teal); }
.vc-obs-tablewrap { overflow: auto; max-height: 72vh; }
.vc-obs-table { margin: 0 !important; border-collapse: separate; border-spacing: 0; font-size: 13px; color: var(--vc-ink); text-align: left; }
.vc-obs-table thead th { background: var(--vc-surface) !important; color: var(--vc-ink-soft); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 10px 10px !important; border-top: 0 !important; border-bottom: 1px solid var(--vc-line) !important; white-space: nowrap; vertical-align: bottom !important; }
.vc-obs-table thead tr.showFilter th { text-transform: none; letter-spacing: 0; background: var(--vc-ground) !important; padding: 6px 8px !important; }
.vc-obs-table thead tr.showFilter input { min-height: 32px; padding: 0 8px; border: 1px solid var(--vc-line); border-radius: 6px; font: inherit; font-size: 13px; max-width: 160px; }
.vc-obs-table thead tr.showFilter i { font-size: 15px !important; color: var(--vc-teal); margin-left: 4px; }
.vc-obs-table tbody td { padding: 10px 10px !important; border-top: 0 !important; border-bottom: 1px solid var(--vc-line-soft); vertical-align: middle !important; }
.vc-obs-table tbody tr:hover td { background: var(--vc-teal-wash); }
.vc-obs-table tbody tr.vc-obs-closedrow td { color: var(--vc-ink-soft); background: #FAFBFB; }
.vc-obs-table tbody i { font-size: 17px; color: var(--vc-teal); }
.vc-obs-table tbody a:hover i { color: var(--vc-navy); }
.vc-obs-num { color: var(--vc-ink-soft); font-size: 12px; }
.vc-obs-id { font-weight: 600; white-space: nowrap; }
.vc-obs-details { min-width: 220px; max-width: 360px; }
.vc-obs-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border: 1px solid var(--vc-line); border-radius: 999px; background: var(--vc-surface); font-size: 12px; font-weight: 600; white-space: nowrap; }
.vc-obs-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.vc-obs-attach { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--vc-ink-soft); white-space: nowrap; }
.vc-obs-attach i { font-size: 14px !important; }
.vc-obs-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--vc-ink-soft); }
.vc-obs-pager i { font-size: 24px; color: var(--vc-teal); }
.vc-obs-pager label { margin: 0; }
.vc-obs-pager .vc-btn-outline { min-height: 36px; }

/* ---- Observations: detail / new (Create.razor) - look only ---- */
.vc-obs-form { font-family: var(--vc-font); color: var(--vc-ink); font-size: 14px; max-width: 1000px; background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: 12px; padding: 20px 24px 0 !important; margin-top: 4px; margin-bottom: 32px; }
.vc-obs-formhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--vc-line-soft); }
.vc-obs-formhead .vc-overline a { color: var(--vc-teal); }
/* New observation: choose the workflow first */
.vc-obs-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.vc-obs-choice-card { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 18px 20px; background: var(--vc-surface); border: 1px solid var(--vc-line); border-left: 5px solid var(--vc-navy); border-radius: 12px; cursor: pointer; font: inherit; color: var(--vc-ink); }
.vc-obs-choice-card:hover { border-color: var(--vc-teal); border-left-color: var(--vc-teal); box-shadow: 0 2px 10px rgba(23, 48, 59, 0.1); }
.vc-obs-choice-card.is-disabled { opacity: 0.55; cursor: not-allowed; }
.vc-obs-choice-title { font-family: 'IBM Plex Sans Condensed', var(--vc-font); font-size: 19px; font-weight: 600; color: var(--vc-navy); }
.vc-obs-choice-sub { font-size: 13px; color: var(--vc-ink-soft); line-height: 1.4; }
.vc-obs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--vc-ink-soft); }
.vc-obs-meta b { color: var(--vc-ink); font-weight: 600; margin-right: 2px; }
.vc-obs-offline { margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; background: #FBEFF1; color: #8C0E21; font-weight: 600; }
.vc-obs-form label { font-size: 13px; font-weight: 600; color: var(--vc-ink-soft); margin-bottom: 4px; }
.vc-obs-form .form-control { min-height: 40px; border: 1px solid #A3AFB5; border-radius: 6px; color: var(--vc-ink); font-size: 14px; box-shadow: none; }
.vc-obs-form .form-control:focus { border-color: var(--vc-teal); box-shadow: 0 0 0 3px rgba(0, 112, 143, .15); }
.vc-obs-form .form-control:disabled, .vc-obs-form .form-control[readonly] { background: var(--vc-ground); color: var(--vc-ink-soft); }
.vc-obs-form textarea.form-control { min-height: 90px; }
.vc-obs-form input[type="checkbox"].form-control { min-height: 22px; height: 22px; width: 22px; margin: 4px auto 0; accent-color: var(--vc-teal); }
.vc-obs-form .form-row, .vc-obs-form .form-group { margin-bottom: 14px !important; }
.vc-obs-form .vc-obs-section { margin: 6px 0 18px !important; padding: 14px 8px 4px; border: 1px solid var(--vc-line-soft); border-radius: 10px; background: #FAFBFB; }
.vc-obs-form .btn { min-height: 40px; padding: 0 16px; border-radius: 6px; font-weight: 600; }
.vc-obs-form .btn-primary { background: var(--vc-navy); border-color: var(--vc-navy); }
.vc-obs-form .btn-secondary, .vc-obs-form .btn-outline-secondary { background: var(--vc-surface); border: 1px solid var(--vc-teal); color: var(--vc-teal); }
.vc-obs-form .btn-info { background: var(--vc-teal); border-color: var(--vc-teal); }
.vc-obs-form .card-columns { display: flex; flex-wrap: wrap; gap: 10px; column-count: initial; }
.vc-obs-form .card { border: 1px solid var(--vc-line); border-radius: 8px; overflow: hidden; margin: 0; }
.vc-obs-form .card-img { object-fit: cover; }
.vc-obs-form .timeline { list-style: none; padding: 0; margin: 0; }
.vc-obs-form .timeline > li { margin-bottom: 8px; }
.vc-obs-form .timeline-item { border: 1px solid var(--vc-line-soft); border-radius: 8px; padding: 8px 12px; background: #FAFBFB; }
.vc-obs-form .timeline-header { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.vc-obs-form .timeline-item .time { float: right; color: var(--vc-ink-soft); font-size: 12px !important; }
.vc-obs-actionbar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px -24px 0; padding: 12px 24px; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--vc-line); border-radius: 0 0 12px 12px; z-index: 5; }
@media print { .vc-obs-actionbar, .vc-obs-actions-top { display: none; } .vc-obs-form { border: 0; } .vc-obs-tablewrap { max-height: none; overflow: visible; } }
/* ---- Module skin: Forms, Documents, CAPA, Sanitation (MainLayout adds .vc-skin by URL) ----
   Same look as the Observations pages, done purely with styles so no page or workflow changes. */
.vc-skin { font-family: var(--vc-font); color: var(--vc-ink); font-size: 14px; padding-top: 6px; }
.vc-skin h1, .vc-skin h2, .vc-skin h3 { font-family: var(--vc-font-head); font-weight: 600; color: var(--vc-navy); }
.vc-skin h4, .vc-skin h5 { font-family: var(--vc-font-head); font-weight: 600; color: var(--vc-ink); }
.vc-skin label { font-size: 13px; font-weight: 600; color: var(--vc-ink-soft); }
.vc-skin a { color: var(--vc-teal); }
.vc-skin a:hover { color: var(--vc-navy); }

/* Buttons */
.vc-skin .btn { border-radius: 6px; font-weight: 600; box-shadow: none !important; }
.vc-skin .btn:not(.btn-sm):not(.btn-icon):not(.btn-link) { min-height: 38px; padding: 0 14px; }
.vc-skin .btn-primary { background: var(--vc-navy); border-color: var(--vc-navy); color: #FFFFFF; }
.vc-skin .btn-primary:hover, .vc-skin .btn-primary:focus { background: #221F5C; border-color: #221F5C; }
.vc-skin .btn-secondary, .vc-skin .btn-outline-secondary, .vc-skin .btn-light, .vc-skin .btn-default { background: var(--vc-surface); border: 1px solid var(--vc-teal); color: var(--vc-teal); }
.vc-skin .btn-secondary:hover, .vc-skin .btn-outline-secondary:hover, .vc-skin .btn-light:hover { background: var(--vc-teal-wash); color: var(--vc-navy); }
.vc-skin .btn-info, .vc-skin .btn-success { background: var(--vc-teal); border-color: var(--vc-teal); color: #FFFFFF; }
.vc-skin .btn-outline-primary { border-color: var(--vc-navy); color: var(--vc-navy); }
.vc-skin .btn-outline-primary:hover { background: var(--vc-navy); color: #FFFFFF; }
.vc-skin .btn-danger { background: var(--vc-critical); border-color: var(--vc-critical); }
.vc-skin .btn:disabled, .vc-skin .btn.disabled { opacity: .5; }

/* Fields */
.vc-skin .form-control, .vc-skin .custom-select, .vc-skin select.form-select { min-height: 38px; border: 1px solid #A3AFB5; border-radius: 6px; color: var(--vc-ink); font-size: 14px; box-shadow: none; }
.vc-skin textarea.form-control { min-height: 80px; }
.vc-skin .form-control:focus, .vc-skin .custom-select:focus { border-color: var(--vc-teal); box-shadow: 0 0 0 3px rgba(0, 112, 143, .15); }
.vc-skin .form-control:disabled, .vc-skin .form-control[readonly] { background: var(--vc-ground); color: var(--vc-ink-soft); }
.vc-skin input[type="checkbox"], .vc-skin input[type="radio"] { accent-color: var(--vc-teal); }
.vc-skin .input-group-text { background: var(--vc-ground); border-color: #A3AFB5; color: var(--vc-ink-soft); }

/* Tables: card look, quiet uppercase headers, hover rows */
.vc-skin table.table { background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: 10px; border-collapse: separate; border-spacing: 0; font-size: 13px; color: var(--vc-ink); margin-bottom: 14px; }
.vc-skin table.table > thead > tr > th { background: var(--vc-surface) !important; color: var(--vc-ink-soft); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 10px !important; border-top: 0 !important; border-bottom: 1px solid var(--vc-line) !important; vertical-align: bottom; white-space: nowrap; }
.vc-skin table.table > thead > tr > th:first-child { border-top-left-radius: 10px; }
.vc-skin table.table > thead > tr > th:last-child { border-top-right-radius: 10px; }
.vc-skin table.table > thead > tr.showFilter > th, .vc-skin table.table > thead > tr + tr > th { text-transform: none; letter-spacing: 0; background: var(--vc-ground) !important; padding: 6px 8px !important; }
.vc-skin table.table > thead input, .vc-skin table.table > thead select { min-height: 32px; border: 1px solid var(--vc-line); border-radius: 6px; padding: 0 8px; font-size: 13px; }
.vc-skin table.table > tbody > tr > td { padding: 10px !important; border-top: 0 !important; border-bottom: 1px solid var(--vc-line-soft); vertical-align: middle; }
.vc-skin table.table > tbody > tr:last-child > td { border-bottom: 0; }
.vc-skin table.table-hover > tbody > tr:hover > td, .vc-skin table.table > tbody > tr:hover > td { background: var(--vc-teal-wash); }
.vc-skin table.table-striped > tbody > tr:nth-of-type(odd) > td { background: #FAFBFB; }
.vc-skin table.table i.fa, .vc-skin table.table i.bi { font-size: 16px !important; color: var(--vc-teal); }
.vc-skin table.table a:hover i.fa { color: var(--vc-navy); }
.vc-skin .table-responsive { border-radius: 10px; }

/* Cards, tabs, badges, modals, paging */
.vc-skin .card { border: 1px solid var(--vc-line); border-radius: 10px; box-shadow: none; }
.vc-skin .card-header { background: var(--vc-surface); border-bottom: 1px solid var(--vc-line-soft); font-weight: 600; color: var(--vc-ink); }
.vc-skin .nav-tabs { border-bottom: 1px solid var(--vc-line); gap: 4px; }
.vc-skin .nav-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; color: var(--vc-ink-soft); font-weight: 600; }
.vc-skin .nav-tabs .nav-link.active { color: var(--vc-navy); border-bottom-color: var(--vc-teal); background: transparent; }
.vc-skin .badge { border-radius: 999px; font-weight: 600; padding: .35em .7em; }
.vc-skin .modal-content { border: 0; border-radius: 12px; box-shadow: 0 12px 40px rgba(23, 48, 59, .25); }
.vc-skin .modal-header { border-bottom: 1px solid var(--vc-line-soft); }
.vc-skin .modal-footer { border-top: 1px solid var(--vc-line-soft); }
.vc-skin .pagination .page-link { color: var(--vc-teal); border-color: var(--vc-line); }
.vc-skin .pagination .page-item.active .page-link { background: var(--vc-navy); border-color: var(--vc-navy); color: #FFFFFF; }
.vc-skin .alert { border-radius: 8px; }
@media print { .vc-skin table.table { border: 0; } }
/* Documents: folder rows (was solid dark-teal boxes with white text) */
.vc-skin table.table-bordered > thead > tr > th, .vc-skin table.table-bordered > tbody > tr > td { border-left: 0 !important; border-right: 0 !important; }
.vc-skin table.table > tbody > tr.vc-doc-folder,
.vc-skin table.table > tbody > tr.vc-doc-folder > td { background: #F7F9FA !important; color: var(--vc-ink) !important; }
.vc-skin table.table > tbody > tr.vc-doc-folder > td { font-weight: 600; border-bottom: 1px solid var(--vc-line-soft) !important; }
.vc-skin table.table > tbody > tr.vc-doc-folder[data-level="1"] > td { background: #EEF3F5 !important; color: var(--vc-navy) !important; font-weight: 700; }
.vc-skin table.table > tbody > tr.vc-doc-folder[data-level="1"] > td:first-child { box-shadow: inset 3px 0 0 var(--vc-teal); }
.vc-skin table.table > tbody > tr.vc-doc-folder[data-level="2"] > td { background: #F4F7F8 !important; }
.vc-skin table.table > tbody > tr.vc-doc-folder:hover > td { background: var(--vc-teal-wash) !important; }
.vc-skin table.table > tbody > tr.vc-doc-folder i.vc-doc-ficon { color: #C9962B !important; font-size: 15px !important; margin-right: 8px; }
.vc-skin table.table > tbody > tr.vc-doc-folder .treegrid-expander { color: var(--vc-teal); font-size: 12px; }
.vc-skin table.table > tbody > tr.vc-doc-row > td { background: var(--vc-surface); }
.vc-skin table.table > tbody > tr.vc-doc-row:hover > td { background: var(--vc-teal-wash); }
/* Forms list: folder rows. FormList.razor is not edited (it has a Katana button), so the folder rows are found
   by their old inline colour (#1E5162) and restyled to match the Documents folders. */
.vc-skin #tree-table > tbody > tr[style*="1E5162"],
.vc-skin #tree-table > tbody > tr[style*="1E5162"] > td { background: #EEF3F5 !important; color: var(--vc-navy) !important; }
.vc-skin #tree-table > tbody > tr[style*="1E5162"] > td { font-weight: 700; border-bottom: 1px solid var(--vc-line-soft) !important; }
.vc-skin #tree-table > tbody > tr[style*="1E5162"] > td:first-child { box-shadow: inset 3px 0 0 var(--vc-teal); }
.vc-skin #tree-table > tbody > tr[style*="1E5162"]:hover > td { background: var(--vc-teal-wash) !important; }
.vc-skin #tree-table > tbody > tr[style*="1E5162"] .treegrid-expander { color: var(--vc-teal); font-size: 12px; margin-right: 26px; }
.vc-skin #tree-table > tbody > tr[style*="1E5162"] .treegrid-expander::after { content: "\f07b"; font-family: FontAwesome; font-weight: normal; font-size: 15px; color: #C9962B; margin-left: 9px; }
.vc-skin #tree-table > tbody > tr[style*="1E5162"] .treegrid-indent:last-child { width: auto !important; padding-left: 15px; }
.vc-skin #tree-table > tbody > tr[style*="1E5162"] .treegrid-indent:last-child::after { content: "\f07b"; font-family: FontAwesome; font-weight: normal; font-size: 15px; color: #C9962B; margin-right: 8px; }
.vc-skin #tree-table > tbody > tr.form-rowdata > td { background: var(--vc-surface); }
.vc-skin #tree-table > tbody > tr.form-rowdata:hover > td { background: var(--vc-teal-wash); }

/* ---- Meeting minutes agenda (Meetings/MOM.razor) ------------------------------------------------------------
   Details boxes are multi-line and grow with the text (before: one line that cut text off), agenda point names read
   as labels, the "+" sits in its own column, and Detail / Approve only show when they can be used. */
.vc-mom-agenda { border-collapse: separate; border-spacing: 0; }
.vc-mom-agenda th { border-top: 0; border-bottom: 2px solid #D5DDE1; font-size: 14px; color: #17303B; }
.vc-mom-agenda td { vertical-align: top; border-top: 1px solid #E3E8EB; padding-top: 10px; padding-bottom: 10px; }
.vc-mom-agenda .form-group { margin-bottom: 0 !important; }
.vc-mom-agenda .vc-mom-label {
    border: 0; background: transparent; box-shadow: none; padding: 6px 2px; resize: none; font-weight: 700; color: #17303B;
    white-space: normal; overflow: hidden; field-sizing: content; min-height: 0; height: auto; line-height: 1.35;
}
.vc-mom-agenda .vc-mom-label:hover, .vc-mom-agenda .vc-mom-label:focus { background: #F4F7F8; outline: 1px dashed #9FB3BC; }
.vc-mom-agenda .vc-mom-text {
    field-sizing: content; min-height: 4.2em; max-height: 24em; resize: vertical; line-height: 1.4;
    padding-right: 12px !important; border: 1px solid #B9C6CC !important; border-radius: 6px;
}
.vc-mom-agenda .vc-mom-text:focus { border-color: #1E5162 !important; box-shadow: 0 0 0 3px rgba(30, 81, 98, .15); }
.vc-mom-agenda td.vc-mom-add { text-align: center; padding-top: 16px; }
.vc-mom-agenda td:last-child { white-space: nowrap; }
.vc-mom-agenda td:last-child .btn { padding: 4px 12px; font-size: 13px; margin: 0 4px 4px 0; }
.vc-mom-agenda td:last-child .btn:disabled { display: none; }
.vc-mom-agenda select.form-control { min-width: 80px; }
.vc-mom-agenda tr:hover td { background: #FAFBFC; }
@media (max-width: 900px) {
    .vc-mom-agenda, .vc-mom-agenda tbody, .vc-mom-agenda tr, .vc-mom-agenda td { display: block; width: 100% !important; }
    .vc-mom-agenda tr:first-child { display: none; }
    .vc-mom-agenda td { border-top: 0; padding: 4px 0; }
    .vc-mom-agenda tr { border-top: 1px solid #D5DDE1; padding: 8px 0; }
}