/* DET's shared visual layer. Module layouts and status meanings remain independent. */
:root {
  --det-ink: #142f43;
  --det-muted: #587084;
  --det-teal: #087f75;
  --det-violet: #8066b4;
  --det-border: #dfe7ed;
  --det-shadow: 0 4px 20px #142f4306, 0 1px 3px #142f4303;
  --green: var(--det-teal);
  --muted: var(--det-muted);
  --line: var(--det-border);
  --lime: #64d2bd;
  color: var(--det-ink);
  background: #f3f6fa;
  font-family: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { background: #f3f6fa; }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
button, a { transition: background-color .16s, border-color .16s, box-shadow .16s; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #8066b4;
  outline-offset: 3px;
}
.main-wrap { margin-left: 248px; background: #f3f6fa; }
.sidebar {
  width: 248px;
  background: linear-gradient(160deg, #142f43 0%, #0c2335 85%);
  box-shadow: 5px 0 24px #102b4008;
}
.sidebar::before { height: 3px; background: linear-gradient(90deg, #8066b4, #53c6b0); }
.sidebar .brand { padding: 26px 22px 24px; gap: 12px; letter-spacing: -.6px; font-size: 22px; }
.sidebar .brand strong { white-space: nowrap; }
.sidebar .brand strong span, .login-story .brand strong span { color: #6ad5bf; }
.sidebar .company-logo { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; background: #fff; padding: 2px; }
.workspace { margin: 0 16px 16px; padding: 12px; border-radius: 12px; background: #ffffff05; border-color: #ffffff10; gap: 10px; }
.workspace-avatar { width: 30px; height: 32px; flex-shrink: 0; border-radius: 8px; background: #a2c9c91c; color: #87dbcb; }
.workspace strong { font-size: 12px; line-height: 1.45; font-weight: 600; }
.workspace small { font-size: 10px; color: #a1b6c5; line-height: 1.5; margin-top: 3px; }
.workspace .online-dot { background: #69c5ae; }
.sidebar nav { padding: 0 12px 22px; scrollbar-color: #496372 transparent; }
.sidebar nav { min-height: 0; }
.sidebar .profile { flex-shrink: 0; }
.nav-label { margin: 22px 13px 8px; font-size: 9px; font-weight: 650; letter-spacing: 1.5px; color: #8da7ba; }
.navitem { min-height: 43px; margin-bottom: 3px; padding: 11px 13px; border-radius: 9px; font-size: 12px; line-height: 1.35; color: #ccdae5; gap: 12px; }
.navitem svg { width: 17px; height: 17px; color: #93adbf; opacity: 1; }
.navitem:hover:not(.active) { background: #ffffff09; color: #fff; }
.navitem.active { background: #ffffff0c; color: #fff; box-shadow: inset 3px 0 #67ccb7; font-weight: 650; }
.navitem.active svg { color: #73d7c0; }
.nav-count { background: #f3b8621a; color: #f3c484; border-radius: 6px; }
.profile { padding: 18px 0; margin: 0 20px; gap: 10px; }
.profile>div { min-width: 0; }
.profile strong { font-size: 12px; line-height: 1.4; }
.profile small { font-size: 11px; }
.avatar { width: 35px; height: 35px; flex-shrink: 0; background: #b3a1d52a; color: #e0d7f1; }
.topbar { height: 68px; padding: 0 34px; background: #ffffffd9; border-color: #e2e9ee; }
.breadcrumb { font-size: 12px; gap: 13px; color: #6a7e8f; }
.breadcrumb strong { color: #2a485f; font-weight: 600; }
.sync-button { color: #28796d; background: #eaf5ef; padding: 8px 11px; min-height: 34px; border-radius: 20px; font-size: 11px; }
.sync-button svg { width: 14px; height: 14px; }
.demo-tag { font-size: 9px; color: #718293; }
main { max-width: 1660px; padding: 30px 34px 0; }
.page-heading { margin-bottom: 24px; gap: 20px; }
.page-heading h1 { color: var(--det-ink); font-size: clamp(25px, 2.3vw, 32px); letter-spacing: -.85px; font-weight: 700; line-height: 1.22; margin-bottom: 9px; }
.page-heading p { font-size: 13px; line-height: 1.6; color: var(--det-muted); max-width: 800px; }
.primary, .secondary { font-size: 13px; min-height: 44px; border-radius: 9px; padding: 11px 17px; }
.primary { background: #087f75; border-color: #087f75; box-shadow: 0 3px 8px #087f7514; }
.primary:hover { background: #086b63; border-color: #086b63; }
.secondary { color: #305970; border-color: #d4e0e7; background: #fff; }
.secondary:hover { background: #edf5f6; border-color: #9bc8c1; }
.icon-button { min-width: 38px; min-height: 38px; }
.text-button { color: #06796f; font-size: 12px; line-height: 1.45; }
.badge { font-size: 11px; padding: 5px 8px; border-radius: 6px; }
.badge.green { background: #e7f6ef; color: #18705c; }
.badge.amber { background: #fff2df; color: #946014; }
.badge.red { background: #fcebed; color: #b03547; }
.badge.neutral { background: #eef1f9; color: #536a95; }
.filterbar { gap: 16px; margin-bottom: 24px; }
.filterbar select, .search { border-radius: 9px; border-color: #dce5eb; box-shadow: 0 1px 2px #102b4003; background: #fff; }
.filterbar select { font-size: 12px; min-height: 42px; color: #34546a; padding: 10px 30px 10px 13px; }
.filterbar .filter-left select { width: 255px; flex-basis: 255px; }
.search { width: 275px; min-height: 42px; }
.search input { color: #34546a; font-size: 12px; }
.filterbar .search input { padding: 10px 0; box-shadow: none; }
.search:focus-within { border-color: #6fada3; outline: 3px solid #087f7514; }
.search svg { color: #77919f; }
.muted { color: var(--det-muted); }
.panel { border: 1px solid var(--det-border); border-radius: 14px; background: #fff; box-shadow: var(--det-shadow); }
.panel[data-page-access] { padding: 24px; overflow-wrap: anywhere; }
.panel-head { padding: 20px 20px 16px; gap: 12px; }
.panel-head h2 { font-size: 16px; color: var(--det-ink); line-height: 1.4; }
.panel-head p { font-size: 12px; color: var(--det-muted); }
.project-cards, .knowledge-grid { gap: 20px; }
.project-card { padding: 24px; }
.project-card .project-symbol { background: #ecf5f3; color: #168477; border-radius: 10px; }
.project-card>small { color: #647c8f; font-size: 10px; letter-spacing: .8px; }
.project-card h2 { color: #173a52; font-size: 23px; line-height: 1.35; margin: 12px 0; }
.project-card p { color: #597184; font-size: 13px; }
.project-card .progress-label { color: #647b8c; font-size: 12px; margin-top: 24px; }
.project-card .progress-label b { color: #168477; }
.progress-track { height: 6px; background: #e5eeef; }
.progress-track i { background: #37ad95; }
.card-actions { gap: 10px; margin-top: 16px; }
.card-actions .secondary, .card-actions .primary { flex: 1 1 auto; }
.data-table th { background: #f6f8fb; font-size: 11px; font-weight: 650; color: #63798b; padding: 14px 20px; border-color: #e4ebf0; }
.data-table td { font-size: 13px; color: #476276; padding: 17px 20px; border-color: #edf1f4; }
.data-table tbody tr:hover { background: #f9fbfc; }
.record-link { font-size: 13px; color: #24465c; }
.data-table td small { font-size: 11px; color: #667d8e; line-height: 1.5; }
.knowledge-card { padding: 25px; background: #fff; }
.knowledge-card>svg { color: #7c65ad; margin-bottom: 20px; }
.knowledge-card h2 { color: #1e4055; font-size: 21px; }
.knowledge-card p { color: #5f7789; font-size: 13px; }
.knowledge-card .eyebrow { color: #728397; }
.report-card { padding: 28px; }
.report-card>svg { color: #7c65ad; }
.report-card h2 { color: #17384c; }
.report-card p { font-size: 13px; color: var(--det-muted); }
.report-card small { font-size: 12px; color: #657c8d; }
.library-intro { background: #eef5f5; border-top: 3px solid #8f81b7; padding: 24px; }
.library-intro p { color: #486d7e; }
.technical-catalog-card { background: #fff; border-radius: 14px; box-shadow: var(--det-shadow); }
.technical-catalog-card:hover { border-color: #93beb7; background: #f9fcfb; }
.technical-catalog-card strong { color: #24465b; }
.technical-catalog-card small { color: #627888; }
.page-footer { padding: 28px 0 22px; font-size: 10px; color: #6d8191; gap: 12px; }
.page-footer b { color: #58b29c; }
.empty { padding: 45px 24px; color: #728697; }
.empty h3 { color: #31546a; }
.empty p { font-size: 13px; }
.info-banner { background: #eef5f7; border-color: #d6e5ea; color: #416577; border-radius: 10px; font-size: 13px; }
.offline-banner, .conflict-banner { border-radius: 10px; font-size: 13px; }
.daily-lmra-banner { padding: 18px 20px; gap: 20px; border-left: 3px solid #9a88b9; background: #fff; }
.daily-lmra-banner strong { font-size: 14px; color: #2f4e63; }
.daily-lmra-banner p { font-size: 12px; color: #627b8e; }
.daily-lmra-banner button { flex-shrink: 0; }
.ct-panel { background: #f6f8fb; border-color: #dfe7ed; box-shadow: var(--det-shadow); }
.ct-category-card { border-color: #dee7ed; border-radius: 12px; }
.ct-category-card:hover { border-color: #96bfb6; }
.ct-create { background: #e7f3ef; color: #177969; border-radius: 8px; }
.ct-tabs [aria-selected=true] { background: #087f75; }
.topic-tabs button { color: #456b7c; background: #eef4f7; font-size: 11px; }
.topic-tabs button:first-child { background: #197b75; }
/* Forms retain their original structure, with clearer fields and touch targets. */
label { color: #3a576b; font-size: 13px; line-height: 1.5; }
input, select, textarea { border-color: #d4e0e7; border-radius: 8px; color: #25485d; background: #fff; }
input:focus, select:focus, textarea:focus { border-color: #569e91; box-shadow: 0 0 0 3px #087f7514; }
input:disabled, select:disabled, textarea:disabled { background: #f1f5f7; color: #647b89; }
.modal-backdrop { background: #091d36a6; backdrop-filter: blur(4px); }
.modal { border-color: #dce6ed; border-radius: 18px; background: #f8fafc; box-shadow: 0 24px 100px #05182940; }
.modal-head, .modal-footer { background: #fff; border-color: #e3eaee; }
.modal-head h2 { color: #193d53; font-size: 23px; letter-spacing: -.5px; }
.modal-head .eyebrow { color: #657f90; }
.modal-head .icon-button { color: #567283; }
.point { background: #fff; border-color: #dce6ed; border-radius: 12px; }
.point-number { background: #e8f4f1; color: #168172; }
.point-header>input { color: #25495e; }
.point-values label { color: #557184; }
.photo-add { color: #087f75; background: #eef8f5; border-color: #c3ded6; border-radius: 8px; }
.section-heading h3 { color: #315267; }
.section-heading p { color: #677f91; font-size: 12px; }
.signature-pad { border-color: #9fbfbf; border-radius: 12px; }
/* Shared dashboards: preserve charts and status colors, improve text contrast. */
.stats.reference-stats { gap: 14px; margin-bottom: 20px; }
.reference-stats .stat { min-height: 124px; padding: 18px; border-radius: 13px; background: #fff; border-color: var(--det-border); box-shadow: var(--det-shadow); }
.reference-stats .stat-label { color: #527085; font-size: 12px; font-weight: 600; }
.reference-stats .stat>strong { color: #17394e; font-size: 31px; }
.reference-stats .stat small { font-size: 11px; color: #668092; }
.reference-grid, .reference-bottom { gap: 18px; }
.reference-bottom { margin-top: 18px; }
.reference-grid .data-table th { font-size: 11px; padding: 12px; }
.reference-grid .data-table td { font-size: 12px; padding: 13px 12px; }
.reference-grid .data-table td small, .reference-grid .data-table td .badge { font-size: 10px; }
.project-table-link strong { font-size: 12px; }
.project-table-link { color: #254e65; }
.package-progress button { font-size: 12px; padding: 12px 0; }
.task-row { padding: 15px 18px; }
.task-row strong { font-size: 12px; color: #2c4c62; }
.task-row small { font-size: 11px; color: #698093; }
.task-row .badge { font-size: 10px; }
.resource-grid { gap: 8px; padding: 0 18px 18px; }
.resource-grid button { border-radius: 9px; background: #f3f7fa; border-color: #e1e9ee; }
.resource-grid span, .resource-grid small { font-size: 11px; }
.resource-grid strong { color: #1c495c; }
.appointment-list button, .site-list strong { font-size: 12px; }
.appointment-list time, .site-list small, .map-note { font-size: 11px; }
.gf-card, .gf-kpi, .tech-card { border-radius: 14px; border-color: var(--det-border); box-shadow: var(--det-shadow); }
.gf-banner, .tech-hero { border-radius: 16px; background: linear-gradient(115deg, #18334b, #1b4a53); }
.gf-kicker { font-size: 10px; }
.gf-finance-values>button { border-radius: 10px; }
.gf-finance-values>button>span { font-size: 12px; }
.tech-directions { border-radius: 10px; background: #eef7f5; border-color: #c8e0d9; color: #0b786d; }
/* Login uses the same identity as the workspace. */
.login { background: #f7f9fc; }
.login-story { background: linear-gradient(140deg, #0e283d, #193c50 72%, #22534f); padding: 18px 60px 36px; }
.login-story .company-logo { object-fit: cover; width: 60px; height: 60px; border-radius: 50%; background: #fff; }
.login-story h1 { font-weight: 650; }
.login-story .brand { font-size: 27px; gap: 17px; }
.login-story p { color: #b8cdd7; }
.login-story>small, .login-lines { color: #a0bdc9; }
.login-form { width: min(420px, 82%); }
.login-form h2 { color: #17384e; font-size: 32px; line-height: 1.2; }
.login-form .eyebrow { color: #718299; font-size: 10px; }
.login-form input { min-height: 51px; border-radius: 10px; background: #fff; font-size: 16px; }
.login-form button.full { min-height: 50px; border-radius: 10px; font-size: 14px; }
.login-form>.muted { font-size: 14px; }
.chip { border-radius: 7px; border-color: #d4e4e2; color: #117c71; min-height: 36px; }
@media (max-width: 1280px) and (min-width: 721px) {
  .sidebar { width: 224px; }
  .main-wrap { margin-left: 224px; }
  .sidebar .brand { padding: 23px 17px; gap: 10px; font-size: 21px; }
  .sidebar .company-logo { width: 39px; height: 39px; }
  main { padding: 26px 24px 0; }
  .topbar { padding: 0 24px; }
  .reference-stats .stat { padding: 16px; }
}
@media (max-width: 1000px) {
  .project-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-heading { align-items: flex-start; }
  .page-heading .heading-actions { flex-shrink: 1; }
  .reference-grid .data-table { min-width: 530px; }
}
@media (max-width: 720px) {
  .main-wrap { margin-left: 0; }
  .sidebar { width: min(290px, 86vw); top: 62px; bottom: calc(68px + env(safe-area-inset-bottom)); }
  .sidebar .brand { display: none; }
  .sidebar .workspace { margin: 16px; }
  .sidebar .navitem { min-height: 45px; font-size: 13px; }
  .topbar { height: 62px; padding: 0 16px; gap: 8px; }
  .top-actions { gap: 8px; }
  .sync-button { font-size: 10px; padding: 7px 9px; min-height: 36px; }
  .mobile-menu { color: #426d7c; min-width: 36px; padding: 7px; }
  .mobile-wordmark { color: #17384e; font-size: 20px; white-space: nowrap; }
  .mobile-wordmark b { color: #088376; }
  .breadcrumb { gap: 8px; }
  main { padding: 23px 16px calc(88px + env(safe-area-inset-bottom)); }
  .page-heading { flex-wrap: wrap; gap: 14px; margin-bottom: 21px; }
  .page-heading h1 { font-size: 27px; line-height: 1.22; letter-spacing: -.7px; }
  .page-heading p { font-size: 13px; }
  .page-heading .primary { min-height: 44px; padding: 10px 14px; font-size: 13px; }
  .filterbar { flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
  .filterbar .filter-left { width: 100%; }
  .filterbar .filter-left select { width: 100%; flex-basis: 100%; }
  .filterbar select { min-height: 46px; font-size: 16px; }
  .search { width: 100%; min-height: 46px; }
  .search input { font-size: 16px; }
  .project-cards { grid-template-columns: 1fr; gap: 15px; }
  .project-card { padding: 22px; }
  .project-card h2 { font-size: 23px; }
  .project-card p { font-size: 13px; }
  .project-card .progress-label { font-size: 12px; }
  .panel-head { padding: 18px 17px 14px; }
  .knowledge-grid { gap: 12px; }
  .knowledge-card { padding: 19px 15px; }
  .knowledge-card h2 { font-size: 16px; }
  .knowledge-card p { font-size: 12px; }
  .knowledge-card .text-button { font-size: 11px; }
  .primary, .secondary, .photo-add { min-height: 46px; }
  .icon-button { min-width: 40px; min-height: 40px; }
  .form-grid input, .form-grid select, .form-grid textarea { font-size: 16px; }
  .modal { border-radius: 16px 16px 0 0; }
  .modal-head h2 { font-size: 21px; }
  .modal-footer { gap: 10px; }
  .modal-footer .primary, .modal-footer .secondary { font-size: 13px; }
  .bottom-nav { padding: 9px 8px calc(9px + env(safe-area-inset-bottom)); border-color: #dce6ec; background: #fffffff5; box-shadow: 0 -4px 20px #102b4005; }
  .bottom-nav button { min-height: 48px; font-size: 10px; color: #698191; gap: 5px; border-radius: 10px; }
  .bottom-nav .selected { color: #087f75; background: #edf7f3; }
  .bottom-nav svg { width: 20px; height: 20px; }
  .page-footer { font-size: 10px; flex-wrap: wrap; line-height: 1.6; padding-top: 22px; }
  .welcome-tile { border-radius: 14px; background: linear-gradient(115deg, #183b50, #1d716b); padding: 23px; }
  .welcome-tile span, .welcome-tile p { font-size: 12px; }
  .mobile-project { border-radius: 12px; padding: 16px; }
  .mobile-project strong { font-size: 14px; }
  .mobile-project small { font-size: 11px; }
  .mobile-tiles button { border-radius: 12px; font-size: 12px; min-height: 100px; }
  .login-story { padding: 24px; }
  .login-form { width: min(460px, 100%); justify-self: center; padding: 35px 24px; }
  .login-form h2 { font-size: 29px; }
}
@media (max-width: 390px) {
  .topbar { padding: 0 10px; }
  .topbar .demo-tag { padding-left: 8px; font-size: 8px; }
  .sync-button { font-size: 9px !important; padding: 6px 7px; gap: 4px; }
  .mobile-wordmark { font-size: 18px; }
  .modal-head h2 { font-size: 19px; }
  .knowledge-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  button, a { transition: none; }
}

/* Version belongs to the loaded client, including offline use. */
.det-version{display:block;color:#36566b;background:#edf4f7;border:1px solid #d9e5ec;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:600;white-space:nowrap;letter-spacing:0}
.topbar{flex-wrap:wrap;height:auto;min-height:68px;padding-top:8px;padding-bottom:8px}
.topbar>.det-version{order:3;flex:0 0 100%;border:0;background:transparent;padding:0;font-size:11px}
.login-form>.det-version,.password-change>.det-version{width:fit-content;margin-bottom:16px}
@media(max-width:760px){.topbar{min-height:78px}.topbar>.det-version{display:block;font-size:11px}}

/* Planner-style task board: columns remain usable on narrow screens. */
.task-board{display:grid;grid-template-columns:repeat(5,minmax(235px,1fr));gap:16px;overflow-x:auto;padding:8px 0 20px;scroll-snap-type:x proximity;max-width:100%}
.task-board-panel{min-width:0;max-width:100%}.task-board-actions{display:flex;gap:8px;flex-wrap:wrap}
.task-board-column{background:#eff4f6;border:1px solid #dde6ea;border-radius:14px;padding:12px;min-width:0;scroll-snap-align:start}
.task-board-column>h3{font-size:1rem;display:flex;justify-content:space-between;gap:8px;margin:4px 0 16px}.task-board-column>h3 span{border-radius:20px;background:white;padding:1px 8px}
.task-board-column.drop-target{outline:3px solid #168e80;background:#e0f3ee}
.task-board-card{padding:16px;background:white;border:1px solid #dce5e9;border-radius:12px;margin-bottom:12px;box-shadow:0 3px 8px #12304408;overflow-wrap:anywhere}
.task-board-card[draggable=true]{cursor:grab}.task-board-card.is-overdue{border-left:4px solid #b84630}.task-board-card h3{margin:8px 0}.task-board-card p{font-size:.9rem;margin:8px 0}.task-board-card .record-link{text-align:left;white-space:normal}.task-priority{font-size:.8rem;font-weight:700;color:#45616c}.task-assignee{font-weight:700}.task-note{white-space:pre-wrap;max-height:7em;overflow:auto}
.task-board-card progress{width:100%;height:8px;accent-color:#148578}.task-check{display:flex!important;align-items:start;gap:8px;padding:8px 0;font-size:.9rem}.task-check input{width:20px!important;min-width:20px;height:20px;margin:0}.task-check input:checked+span{text-decoration:line-through;color:#526a73}.task-status{display:grid;gap:4px;font-size:.8rem;margin-top:14px}.task-status select{width:100%;min-height:44px}
.task-checklist-row{display:grid;grid-template-columns:24px 1fr 44px;align-items:center;gap:8px;margin-bottom:8px}.task-checklist-row input[type=checkbox]{width:20px;height:20px}.task-checklist-row input{min-width:0}.task-board-list{grid-template-columns:1fr;overflow:visible}.task-board-list .task-board-column{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.task-board-list .task-board-column>h3{grid-column:1/-1}
.task-board-panel[aria-busy=true] .task-board{pointer-events:none;opacity:.65}
@media(max-width:600px){.task-board{grid-template-columns:repeat(5,minmax(260px,85vw))}.task-board-list{grid-template-columns:1fr}.task-board-list .task-board-column{grid-template-columns:1fr}.task-board-panel{padding:14px}.task-board-actions{width:100%}.task-board-actions button{flex:1}}

.det-end-to-end{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:20px 0}.det-end-to-end article{border:1px solid #dce5e9;border-top:4px solid #168e80;border-radius:12px;padding:18px;background:#f8fbfc}.det-end-to-end h3{margin:12px 0}.det-end-to-end strong{color:#16766c}

.purchase-simple-nav{margin-bottom:18px}.purchase-simple-nav details>summary,.purchase-extra>summary{cursor:pointer;padding:12px 0;color:#46626d}.purchase-extra{border:1px solid #dce5e9;border-radius:12px;padding:0 14px}.purchase-extra[open]{display:grid;gap:12px}.purchase-extra label{display:grid;gap:5px}.purchase-line{border:1px solid #dce5e9;border-radius:12px;padding:16px;margin-bottom:14px;background:#f8fbfc}.purchase-line details select{width:100%}.purchase-next{background:#edf6f4;padding:10px;border-radius:8px}.required-marker{color:#b43535}