/* Optional Widgets appearance. The production data and responsive grids are unchanged. */
html[data-theme="widgets"] {
  color-scheme: dark;
  color: #f2f5f8;
  background: #060808;
  --navy: #0b1014;
  --muted: #a0acb8;
  --line: #263039;
  --blue: #50d9c6;
  --amber: #ffc278;
  --green: #63df9f;
  --red: #ff8d9c;
  --radius: 24px;
  --widget-surface: #11181e;
  --widget-field: #151e27;
  --widget-secondary: #aebbc8;
}
html[data-theme="widgets"] body { background: #060808; color: #f2f5f8; }
html[data-theme="widgets"] ::selection { color: #fff; background: #6254a8; }
html[data-theme="widgets"] button:focus-visible,
html[data-theme="widgets"] a:focus-visible,
html[data-theme="widgets"] input:focus-visible,
html[data-theme="widgets"] select:focus-visible,
html[data-theme="widgets"] textarea:focus-visible { outline-color: #7be7d6; }
html[data-theme="widgets"] input[type="checkbox"],
html[data-theme="widgets"] input[type="radio"] { accent-color: #52dbc6; }

/* A quiet black frame makes the coloured widgets the focal point. */
html[data-theme="widgets"] .sidebar {
  background: linear-gradient(180deg, #10151c 0%, #0b1014 68%, #081110 100%);
  border-right: 1px solid #222c32;
}
html[data-theme="widgets"] .brand { color: #f4f7fa; }
html[data-theme="widgets"] .brand-mark {
  color: #befff1;
  background: linear-gradient(145deg, #245d55, #142c31);
  border: 1px solid #377b6d;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #ffffff12;
}
html[data-theme="widgets"] .brand small { color: #9daebc; }
html[data-theme="widgets"] .nav-label { color: #8e9daa; }
html[data-theme="widgets"] .nav-item { color: #afbcc9; border-radius: 12px; }
html[data-theme="widgets"] .nav-item:hover:not(:disabled) { color: #e9fff9; background: #19262b; }
html[data-theme="widgets"] .nav-item.active {
  color: #b4ffee;
  background: linear-gradient(100deg, #1a3935, #14282b);
  box-shadow: inset 0 0 0 1px #3f6c625e;
}
html[data-theme="widgets"] .nav-item .pill { color: #b3c1cc; border-color: #536170; background: #0c161d40; border-radius: 6px; }
html[data-theme="widgets"] .sidebar-note { border-color: #2a363e; color: #99a9b7; }
html[data-theme="widgets"] .sidebar-note strong { color: #cbd6dd; }
html[data-theme="widgets"] .topbar { background: #0a0e11ee; border-bottom-color: #232e35; backdrop-filter: blur(18px); }
html[data-theme="widgets"] .breadcrumb { color: #9cabb9; }
html[data-theme="widgets"] .breadcrumb strong { color: #dbe4ec; }
html[data-theme="widgets"] .topbar-right { color: #9cabb9; }
html[data-theme="widgets"] .avatar { color: #c9dce9; background: #25323d; }
html[data-theme="widgets"] .save-indicator { color: #a5b8bc; }
html[data-theme="widgets"] .save-indicator::before { background: #4fd1a3; }
html[data-theme="widgets"] .save-indicator.pending { color: #f3c27b; }
html[data-theme="widgets"] .save-indicator.pending::before { background: #f3b864; }
html[data-theme="widgets"] .save-indicator.failed { color: #ff9aab; }
html[data-theme="widgets"] .save-indicator.failed::before { background: #ff7f97; }
html[data-theme="widgets"] .heading-row h1 { color: #f3f6fa; letter-spacing: -.9px; }
html[data-theme="widgets"] .eyebrow { color: #85cbbb; }
html[data-theme="widgets"] .subheading { color: #a8b5c2; }

html[data-theme="widgets"] .button {
  background: #19232d;
  color: #dce7ef;
  border-color: #354451;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 #ffffff05;
}
html[data-theme="widgets"] .button:hover:not(:disabled) { background: #243440; border-color: #567080; color: #fff; }
html[data-theme="widgets"] .button.primary {
  background: linear-gradient(135deg, #5ae6c8, #45bfae);
  color: #052c28;
  border-color: #6be5d0;
  font-weight: 650;
  box-shadow: 0 3px 17px #39c6ae12, inset 0 1px 0 #ffffff38;
}
html[data-theme="widgets"] .button.primary:hover:not(:disabled) { background: #7cebd5; border-color: #a1f9e7; color: #042c24; }
html[data-theme="widgets"] .button.quiet { color: #adc4d7; background: transparent; border-color: transparent; box-shadow: none; }
html[data-theme="widgets"] .button.quiet:hover:not(:disabled) { background: #19262f; border-color: #30434d; }
html[data-theme="widgets"] .button.danger,
html[data-theme="widgets"] .button.danger-quiet { color: #ff9dad; }
html[data-theme="widgets"] .danger-quiet:hover:not(:disabled) { background: #3b202b; border-color: #7e4655; }
html[data-theme="widgets"] .button.theme-toggle { color: #d8ccff; background: #272036; border-color: #4d3d65; }
html[data-theme="widgets"] .button.theme-toggle:hover { color: #f1ebff; background: #352a4a; border-color: #8b6fb5; }
html[data-theme="widgets"] .text-button { color: #72dfd2; }
html[data-theme="widgets"] .icon-button { color: #b2c8d7; background: #1b2935; border: 1px solid #2c4050; border-radius: 9px; }
html[data-theme="widgets"] .icon-button:hover:not(:disabled) { color: #d4fff6; background: #254238; border-color: #4b7e6e; }

/* Each statistic has its own colour, without inventing progress for dates or risks. */
html[data-theme="widgets"] .stat {
  --widget-accent: #bd7bff;
  border-color: #68558160;
  border-radius: 28px;
  padding: 21px 22px;
  min-height: 165px;
  background: linear-gradient(150deg, #2e253d 0%, #190e30 55%, #35135a 100%);
  box-shadow: inset 0 1px 0 #ffffff1a, 0 8px 24px #00000015;
  overflow: hidden;
}
html[data-theme="widgets"] .stat:nth-child(2) {
  --widget-accent: #31d2e7;
  border-color: #3e697c70;
  background: linear-gradient(150deg, #1d333e 0%, #062531 55%, #043846 100%);
}
html[data-theme="widgets"] .stat:nth-child(3) {
  --widget-accent: #ff9951;
  border-color: #855b4670;
  background: linear-gradient(150deg, #422c28 0%, #351609 55%, #4e210a 100%);
}
html[data-theme="widgets"] .stat:nth-child(4) {
  --widget-accent: #8be53e;
  border-color: #4f6c4565;
  background: linear-gradient(150deg, #293426 0%, #112609 55%, #17370d 100%);
}
html[data-theme="widgets"] .stat-top { color: #e1e2e9; font-size: 12px; }
html[data-theme="widgets"] .stat-top svg { color: var(--widget-accent); width: 20px; height: 20px; }
html[data-theme="widgets"] .stat-value { color: #fff; font-size: 34px; font-weight: 550; margin-top: 17px; letter-spacing: -1px; }
html[data-theme="widgets"] .stat.accent .stat-value { color: #fff; }
html[data-theme="widgets"] .stat-value .unit { color: #bac5cf; }
html[data-theme="widgets"] .stat-value.muted { color: #d6dde3; font-size: 26px; }
html[data-theme="widgets"] .stat-foot { color: #c0c9d0; font-size: 10px; }
html[data-theme="widgets"] .stat.accent::before { display: none; }
html[data-theme="widgets"] .widget-meter-wrap { margin-top: 13px; }
html[data-theme="widgets"] .widget-meter-caption { color: #d3c5e4; font-size: 10px; line-height: 1.6; margin-bottom: 7px; }
html[data-theme="widgets"] .stat:nth-child(2) .widget-meter-caption { color: #b6d8df; }
html[data-theme="widgets"] .widget-meter { height: 7px; border-radius: 10px; overflow: hidden; background: #ffffff13; }
html[data-theme="widgets"] .widget-meter-fill { height: 100%; border-radius: inherit; background: var(--widget-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--widget-accent) 24%, transparent); }

html[data-theme="widgets"] .card {
  background: linear-gradient(145deg, #151d24, #10171c 65%);
  border-color: #2c363e;
  border-radius: 24px;
  box-shadow: inset 0 1px 0 #ffffff05;
}
html[data-theme="widgets"] .card-head { border-color: #29343c; }
html[data-theme="widgets"] .card-title { color: #eef4f8; }
html[data-theme="widgets"] .card-title .count { color: #bbcfdb; background: #263542; border-radius: 7px; }
html[data-theme="widgets"] .card-caption { color: #a5b3c2; }
html[data-theme="widgets"] .search-field svg { color: #97adbd; }
html[data-theme="widgets"] .field-control,
html[data-theme="widgets"] .material-table .material-row .notes-input {
  color: #e0e9f1;
  background: var(--widget-field);
  border-color: #526c7e;
  border-radius: 8px;
}
html[data-theme="widgets"] .field-control:hover:not(:disabled),
html[data-theme="widgets"] .material-table .material-row .notes-input:hover:not(:disabled) { border-color: #597386; }
html[data-theme="widgets"] .field-control::placeholder,
html[data-theme="widgets"] .notes-input::placeholder { color: #8b9eaf; opacity: 1; }
html[data-theme="widgets"] .field-control:disabled,
html[data-theme="widgets"] .notes-input:disabled,
html[data-theme="widgets"] .material-table .material-row .notes-input:disabled {
  color: #bdcbd7;
  -webkit-text-fill-color: #bdcbd7;
  opacity: 1;
  background: #141c24;
  border-color: #303d4a;
}
html[data-theme="widgets"] select option { background: #18232c; color: #e1eaf1; }
html[data-theme="widgets"] .notice { background: #2c2418; border-color: #5e4b2d; color: #e5c998; border-radius: 15px; }
html[data-theme="widgets"] .notice.soft { background: #152936; border-color: #304d63; color: #bad5e8; }
html[data-theme="widgets"] .notice svg { color: #ffc16a; }
html[data-theme="widgets"] .notice.soft svg { color: #78cee6; }
html[data-theme="widgets"] th { background: #18232c; color: #afc1d0; border-color: #2a3945; }
html[data-theme="widgets"] td { color: #c3d0dd; border-color: #26343f; }
html[data-theme="widgets"] .batch-row:hover td { background: #1a2e37; }
html[data-theme="widgets"] .batch-row:focus-visible { outline: 2px solid #7be7d6; outline-offset: -3px; }
html[data-theme="widgets"] .batch-row:focus-visible td { background: #19332f; }
html[data-theme="widgets"] .model-icon { background: linear-gradient(140deg, #3b3152, #2d2344); border-color: #65517d; color: #cbacff; border-radius: 12px; }
html[data-theme="widgets"] .model-name { color: #f0f4f8; }
html[data-theme="widgets"] .minor { color: #a6b6c6; }
html[data-theme="widgets"] .date-primary { color: #ddebf4; }
html[data-theme="widgets"] .date-empty { color: #9aaaba; }
html[data-theme="widgets"] .badge { border-radius: 7px; }
html[data-theme="widgets"] .badge.amber { background: #4c351b; color: #ffce83; }
html[data-theme="widgets"] .badge.blue { background: #1c3654; color: #a8d2ff; }
html[data-theme="widgets"] .badge.green { background: #173f32; color: #83e6b6; }
html[data-theme="widgets"] .badge.red { background: #4b2531; color: #ffafbd; }
html[data-theme="widgets"] .badge.gray { background: #2c3642; color: #c2ccd8; }
html[data-theme="widgets"] .progress-track { height: 5px; background: #263d45; }
html[data-theme="widgets"] .progress-fill { background: #43d6b0; }
html[data-theme="widgets"] .summary-footer { background: #10181e; border-color: #29353f; color: #a3b1c1; }
html[data-theme="widgets"] .timeline-step { color: #a4b6c5; }
html[data-theme="widgets"] .timeline-step::before { background: #111b21; border-color: #5e7c8f; }
html[data-theme="widgets"] .timeline-step:not(:last-child)::after { background: #3a505f; }
html[data-theme="widgets"] .timeline-step.active::before { background: #5cdebc; border-color: #5cdebc; box-shadow: 0 0 0 4px #41d9b620; }
html[data-theme="widgets"] .timeline-step strong { color: #e0edf4; }
html[data-theme="widgets"] .info-notes { color: #aab9c8; }
html[data-theme="widgets"] .info-notes b { color: #d8ecf6; }
html[data-theme="widgets"] .config-tab { color: #b0c1cf; background: #1a2631; border-color: #2b3c4b; border-radius: 11px; }
html[data-theme="widgets"] .config-tab:hover { background: #253743; color: #e4fff8; }
html[data-theme="widgets"] .config-tab.active { color: #a3f5de; background: linear-gradient(140deg, #193e37, #17302e); border-color: #467f6e; box-shadow: inset 0 1px 0 #ffffff08; }
html[data-theme="widgets"] .config-tab.add { color: #abd7cb; background: transparent; border-color: #50766e; }
html[data-theme="widgets"] .schedule-field label { color: #b2c3d1; }
html[data-theme="widgets"] .schedule-help { color: #9aafbf; }
html[data-theme="widgets"] .detail-metric { border-color: #32434f; }
html[data-theme="widgets"] .detail-metric span { color: #a6b8c9; }
html[data-theme="widgets"] .detail-metric strong { color: #d8f4ec; }
html[data-theme="widgets"] .detail-metric small { color: #a0b4c6; }

/* Keep the established two-row material grid and every container breakpoint. */
html[data-theme="widgets"] .material-order-help { color: #a3b5c5; }
html[data-theme="widgets"] .material-table .material-row { background: #111b22; border-color: #2d3c48; }
html[data-theme="widgets"] .material-table .material-row:nth-child(odd) { background: #131e26; }
html[data-theme="widgets"] .material-table .material-row > td { background: transparent; }
html[data-theme="widgets"] .material-table .material-row > td[data-label]::before { color: #a7bdcc; }
html[data-theme="widgets"] .material-name { color: #edf5fa; }
html[data-theme="widgets"] .scope-label { color: #a3b6c8; }
html[data-theme="widgets"] .material-number { color: #a2d2c7; }
html[data-theme="widgets"] .drag-handle { color: #839cad; }
html[data-theme="widgets"] .drag-handle:hover { color: #8ae6d0; background: #183b36; border-color: #426d60; }
html[data-theme="widgets"] .material-table .material-group-row th {
  background: linear-gradient(100deg, #203c3c, #192c34);
  border-color: #355458;
  color: #d8eee8;
}
html[data-theme="widgets"] .material-group-label { color: #c5f0df; }
html[data-theme="widgets"] .group-count { color: #a7c9c4; }
html[data-theme="widgets"] .group-drop-hint { color: #9fccc4; }
html[data-theme="widgets"] .material-table .material-group-empty td { background: #101a21; color: #a2b6c7; }
html[data-theme="widgets"] .material-table .row-disabled .material-name { color: #aab5bf; }
html[data-theme="widgets"] .material-table .material-row.drop-before { box-shadow: inset 0 3px #67e3bc; }
html[data-theme="widgets"] .material-table .material-row.drop-after { box-shadow: inset 0 -3px #67e3bc; }
html[data-theme="widgets"] .material-table .drop-category-active th,
html[data-theme="widgets"] .material-table .drop-category-active td { background: #244d41; color: #c7ffe8; }
html[data-theme="widgets"] .material-drag-preview { background: #203b35; color: #d4fff0; border-color: #5d9b83; border-radius: 12px; box-shadow: 0 12px 35px #00000060; }
html[data-theme="widgets"] .material-spec-preview {
  color: #b7c9db;
  border-color: #34495b;
  border-radius: 11px;
  background: #17232f;
}
html[data-theme="widgets"] .material-spec-preview:hover { background: #1c3240; border-color: #557b91; }
html[data-theme="widgets"] .material-spec-preview.empty-spec { background: #142029; color: #a1b7c9; border-color: #3a5161; }
html[data-theme="widgets"] .spec-preview-text { color: #c2d5e5; }
html[data-theme="widgets"] .spec-preview-images img { background: #111b23; border-color: #3e5366; }
html[data-theme="widgets"] .spec-more-images { color: #aec8e2; }
html[data-theme="widgets"] .page-footer { color: #94a8b8; }
html[data-theme="widgets"] .page-footer button { color: #adc8db; }
html[data-theme="widgets"] .empty { color: #b1c1ce; }
html[data-theme="widgets"] .empty svg { color: #7397ac; }
html[data-theme="widgets"] .muted-text { color: #a3b6c7; }

/* Editing, viewing and copy dialogs share the same dark, readable controls. */
html[data-theme="widgets"] dialog {
  color: #e3edf5;
  background: #151e26;
  border-color: #40515e;
  border-radius: 24px;
  box-shadow: 0 24px 100px #000000a8, inset 0 1px 0 #ffffff0a;
}
html[data-theme="widgets"] dialog::backdrop { background: #00000099; backdrop-filter: blur(7px); }
html[data-theme="widgets"] .modal-head { background: #19242e; border-color: #34434f; }
html[data-theme="widgets"] .modal-head h2 { color: #f0f7fb; }
html[data-theme="widgets"] .modal-body label { color: #bed0df; }
html[data-theme="widgets"] .modal-body .hint { color: #a6b8cb; }
html[data-theme="widgets"] .modal-actions { background: #17222b; border-color: #34434f; }
html[data-theme="widgets"] .check-row { color: #c1d4e3 !important; }
html[data-theme="widgets"] .checkbox-group { background: #101a22; border-color: #364958; border-radius: 12px; }
html[data-theme="widgets"] .modal-error { color: #ff9fab; }
html[data-theme="widgets"] .category-manager-caption { color: #bbccdb; }
html[data-theme="widgets"] .category-manager-list { border-color: #344855; border-radius: 14px; }
html[data-theme="widgets"] .category-manager-item { background: #17232e; border-color: #30414e; }
html[data-theme="widgets"] .category-manager-name strong { color: #d5e5f1; }
html[data-theme="widgets"] .category-manager-name span { color: #a5bbcc; }
html[data-theme="widgets"] .category-add-button { background: #19312f; color: #afe7d6; border-color: #4a7367; }
html[data-theme="widgets"] .category-manager-footnote { color: #a0b5c8; }
html[data-theme="widgets"] .spec-text-counter,
html[data-theme="widgets"] .spec-gallery-heading span:last-child { color: #a5b9cb; }
html[data-theme="widgets"] .spec-gallery-heading { color: #c2d4e1; }
html[data-theme="widgets"] .spec-image-gallery { background: #0f1a22; border-color: #3d5262; border-radius: 13px; }
html[data-theme="widgets"] .spec-image-open { background: #141e27; border-color: #3c5367; border-radius: 10px; }
html[data-theme="widgets"] .spec-image-item figcaption { color: #aebfd0; }
html[data-theme="widgets"] .spec-image-remove { color: #f1b6c4; background: #2b2632ed; border-color: #6b4c5c; }
html[data-theme="widgets"] .spec-image-remove:hover { color: #ffd4df; background: #663447; }
html[data-theme="widgets"] .spec-no-images { color: #a5bbce; }
html[data-theme="widgets"] .spec-image-toolbar > span { color: #9fb6cb; }
html[data-theme="widgets"] .spec-readonly-text { color: #d5e4ef; }
html[data-theme="widgets"] #material-image-viewer { background: #0b1116; }
html[data-theme="widgets"] .image-viewer-head { background: #19252f; border-color: #344855; }
html[data-theme="widgets"] .image-viewer-head span { color: #c6d8e5; }
html[data-theme="widgets"] #material-image-view { background: #0b1116; }
html[data-theme="widgets"] .access-role { background: #283440; color: #d1dfeb; border-radius: 8px; }
html[data-theme="widgets"] .access-role.is-admin { color: #acf0cd; background: #1c4033; }
html[data-theme="widgets"] .access-banner { color: #aebfcd; background: #131e27; border-color: #344753; border-radius: 15px; }
html[data-theme="widgets"] .access-banner strong { color: #dceaf4; }
html[data-theme="widgets"] .access-banner.is-admin { background: #142a24; border-color: #375e50; }
html[data-theme="widgets"] .access-banner.is-admin strong { color: #a1e8c5; }
html[data-theme="widgets"] .access-fields label { color: #c5d7e6; }
html[data-theme="widgets"] .connection-error { color: #c6d8e7; }
html[data-theme="widgets"] .connection-error h1 { color: #f2f6fa; }
html[data-theme="widgets"] .fatal { color: #c1d3e1; background: #17242e; border: 1px solid #354c5d; }
html[data-theme="widgets"] .fatal pre { color: #f4c680; }
html[data-theme="widgets"] .load-banner { color: #e6c48e; background: #332719; }
html[data-theme="widgets"] #toast { color: #e2f9f1; background: #26463c; border: 1px solid #5b8672; border-radius: 13px; box-shadow: 0 8px 35px #00000077; }

html[data-theme="widgets"] .material-copy-picker { color: #bccdde; border-color: #384b59; }
html[data-theme="widgets"] .material-copy-modes legend { color: #d4e6f4; }
html[data-theme="widgets"] .modal-body .material-copy-mode { color: #bed0df; background: #172530; border-color: #3b5365; border-radius: 12px; }
html[data-theme="widgets"] .material-copy-mode:has(input:checked) { background: #1b3934; border-color: #568d79; box-shadow: inset 0 0 0 1px #8cf2c90b; }
html[data-theme="widgets"] .material-copy-mode strong { color: #d4e6f4; }
html[data-theme="widgets"] .material-copy-mode small { color: #a6bcd0; }
html[data-theme="widgets"] .material-copy-inherit { color: #b1d4e7; background: #1d3444; border-radius: 9px; }
html[data-theme="widgets"] .material-copy-reset { color: #e4c38d; background: #332a1c; border-radius: 9px; }
html[data-theme="widgets"] .material-copy-list-actions { color: #a5bdcf; }
html[data-theme="widgets"] .material-copy-hidden-count { color: #e0bb7f; }
html[data-theme="widgets"] .material-copy-list { background: #111e28; border-color: #40586b; border-radius: 12px; }
html[data-theme="widgets"] .material-copy-group + .material-copy-group { border-color: #3b5365; }
html[data-theme="widgets"] .material-copy-group-head { background: #243b47; border-color: #3c5365; }
html[data-theme="widgets"] .material-copy-group-head > strong { color: #d1ede6; }
html[data-theme="widgets"] .material-copy-group-head > strong small { color: #a6c3ce; }
html[data-theme="widgets"] .modal-body .material-copy-group-head > label { color: #c2d8e5; }
html[data-theme="widgets"] .modal-body .material-copy-item { color: #c5d9e8; border-color: #2c4252; }
html[data-theme="widgets"] .material-copy-item:hover { background: #1e3543; }
html[data-theme="widgets"] .material-copy-item-heading strong { color: #deedf7; }
html[data-theme="widgets"] .material-copy-automatic { color: #b6d5ed; background: #29485e; }
html[data-theme="widgets"] .material-copy-spec { color: #aec5d8; }
html[data-theme="widgets"] .material-copy-meta { color: #9eb7ca; }
html[data-theme="widgets"] .material-copy-item.inherited { background: #1b2a33; }
html[data-theme="widgets"] .material-copy-empty { color: #adc1d2; }
html[data-theme="widgets"] .material-copy-explanation { color: #a5bdd1; }

@media (max-width: 760px) {
  html[data-theme="widgets"] .sidebar { border-right: 0; border-bottom: 1px solid #25323b; }
  html[data-theme="widgets"] .stat { min-height: 155px; padding: 18px 17px; border-radius: 23px; }
  html[data-theme="widgets"] .stat-value { font-size: 30px; }
  html[data-theme="widgets"] .stat-value.muted { font-size: 23px; }
  html[data-theme="widgets"] .stat-top { font-size: 11px; }
  html[data-theme="widgets"] .card { border-radius: 20px; }
  html[data-theme="widgets"] .widget-meter-caption { font-size: 9px; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="widgets"] .topbar { background: #0a0e11; backdrop-filter: none; }
  html[data-theme="widgets"] dialog::backdrop { background: #000000b3; backdrop-filter: none; }
}