/* Unlimited Civil Studio shared design system.
   Stabilization layer: component appearance only. Do not place module-specific layout here. */
:root {
  --uc-bg: #060a10;
  --uc-surface: #0b1421;
  --uc-surface-2: #0f1b2b;
  --uc-surface-3: #111d2d;
  --uc-border: #1d3048;
  --uc-border-strong: #294968;
  --uc-text: #ecf4ff;
  --uc-text-muted: #7f93aa;
  --uc-text-dim: #5f7591;
  --uc-blue: #1f9cff;
  --uc-teal: #19e6c0;
  --uc-danger: #ff5d66;
  --uc-warning: #f3c760;
  --uc-success: #42d9b8;
  --uc-radius-sm: 6px;
  --uc-radius-md: 9px;
  --uc-radius-lg: 13px;
  --uc-space-1: 4px;
  --uc-space-2: 8px;
  --uc-space-3: 12px;
  --uc-space-4: 16px;
  --uc-space-5: 20px;
  --uc-space-6: 24px;
  --uc-shadow: 0 18px 55px rgba(0, 0, 0, 0.35);
  --uc-font: Inter, 'Segoe UI', Arial, sans-serif;
  --uc-font-size: 14px;
  --uc-control-height: 38px;
  --uc-scroll-track: #0b1520;
  --uc-scroll-thumb: #4f78a7;
  --uc-scroll-hover: #6a96c8;
}

/* UC11: Keep plans and source notes readable behind every dialog. Tint is allowed; blur is not. */
*,
*::before,
*::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
dialog::backdrop,
.uc-dialog::backdrop,
.uc-global-dialog::backdrop {
  background: rgba(1, 6, 11, 0.38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html,
body {
  font-family: var(--uc-font);
  font-size: var(--uc-font-size);
}
body {
  color: var(--uc-text);
}

/* Shared controls */
.btn,
button,
input,
select,
textarea {
  font-family: inherit;
}
.btn {
  min-height: var(--uc-control-height);
  border-radius: var(--uc-radius-md);
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    transform 0.12s ease;
}
.btn:hover {
  border-color: #31557f;
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(31, 156, 255, 0.85);
  outline-offset: 2px;
}
.btn:disabled,
button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

input,
select,
textarea {
  border-radius: var(--uc-radius-md);
  border-color: #20354e;
  background: #08111d;
  color: var(--uc-text);
}
input::placeholder,
textarea::placeholder {
  color: #566c84;
}
input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
select[readonly],
textarea[readonly] {
  border-color: var(--uc-border);
  background: var(--uc-surface-2);
  color: var(--uc-text-muted);
  cursor: not-allowed;
  opacity: 1;
}

/* Shared surfaces */
.panel {
  border-radius: var(--uc-radius-lg);
  border-color: var(--uc-border);
}
.pagehead {
  gap: var(--uc-space-4);
  margin-bottom: 18px;
}
.pagehead h2 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.pagehead p {
  color: var(--uc-text-muted);
}
.notice {
  border-radius: 10px;
}

/* Tables */
table {
  font-variant-numeric: tabular-nums;
}
th {
  color: var(--uc-text-dim);
  font-size: 10px;
  letter-spacing: 0.08em;
}
td {
  border-top-color: #17283c;
}

/* Dialog consistency */
dialog {
  color: var(--uc-text);
}
.uc-dialog::backdrop,
dialog::backdrop {
  background: rgba(1, 6, 11, 0.72);
  backdrop-filter: blur(2px);
}

/* Shared scrollbars. Module CSS may override dimensions but should use these colors. */
* {
  scrollbar-color: var(--uc-scroll-thumb) var(--uc-scroll-track);
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: var(--uc-scroll-track);
}
*::-webkit-scrollbar-thumb {
  background: var(--uc-scroll-thumb);
  border: 2px solid var(--uc-scroll-track);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--uc-scroll-hover);
}

/* Stable status semantics */
.uc-status-success {
  color: var(--uc-success);
}
.uc-status-warning {
  color: var(--uc-warning);
}
.uc-status-danger {
  color: var(--uc-danger);
}
.uc-muted {
  color: var(--uc-text-muted);
}

/* Motion should never be required to understand state. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Numeric-entry standard: UC never shows browser spinner arrows. */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* UC 4.6.3 — consistent application dialogs (replaces browser alert/confirm/prompt) */
.uc-global-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #31566b;
  border-radius: 12px;
  background: #081522;
  color: #e5eff7;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.68);
}
.uc-global-dialog::backdrop {
  background: rgba(1, 6, 11, 0.72);
  backdrop-filter: blur(2px);
}
.uc-global-dialog form {
  display: grid;
}
.uc-global-dialog header,
.uc-global-dialog footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.uc-global-dialog header {
  justify-content: space-between;
  border-bottom: 1px solid #263e50;
}
.uc-global-dialog header strong {
  font-size: 16px;
}
.uc-global-dialog header button {
  border: 0;
  background: transparent;
  color: #90a7b9;
  font-size: 22px;
  cursor: pointer;
}
.uc-global-dialog-body {
  display: grid;
  gap: 12px;
  padding: 18px 16px;
}
.uc-global-dialog-body p {
  margin: 0;
  color: #c9d8e3;
  line-height: 1.5;
}
.uc-global-dialog-body label {
  display: grid;
  gap: 6px;
}
.uc-global-dialog-body label span {
  color: #829aac;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.uc-global-dialog-body input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 11px;
  border: 1px solid #315168;
  border-radius: 7px;
  background: #06101a;
  color: #fff;
  font: inherit;
}
.uc-global-dialog footer {
  justify-content: flex-end;
  border-top: 1px solid #263e50;
}
.uc-global-dialog .btn.danger {
  border-color: #87313b;
  background: #4b1820;
  color: #ffd7da;
}

/* UC V2.6.2 - site-wide readability pass.
   Navigation remains at its existing scale; working UI text is raised for 100% browser zoom. */
:root {
  --uc-font-size: 15px;
}
html,
body {
  font-size: 15px;
}
body:not(.studio-document-page) button,
body:not(.studio-document-page) .btn,
body:not(.studio-document-page) input,
body:not(.studio-document-page) select,
body:not(.studio-document-page) textarea {
  font-size: 14px;
}
body:not(.studio-document-page) .btn.small {
  font-size: 13px;
}
body:not(.studio-document-page) small {
  font-size: 13px;
}
body:not(.studio-document-page) th {
  font-size: 12px;
}
body:not(.studio-document-page) label,
body:not(.studio-document-page) label span {
  font-size: 13px;
}
/* Keep the approved application navigation scale unchanged. */
body:not(.studio-document-page) .side .nav {
  font-size: 14px;
}
body:not(.studio-document-page) .nav-label {
  font-size: 10px;
}

/* Notes Reader progress overlay. The tint preserves plan readability; no blur. */
.uc-ocr-busy[hidden] {
  display: none !important;
}
.uc-ocr-busy {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: rgba(1, 6, 11, 0.52);
}
.uc-ocr-busy-card {
  min-width: 300px;
  padding: 28px 34px;
  border: 1px solid #2a5167;
  border-radius: 14px;
  background: #071a26;
  color: #e7f2fa;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.uc-ocr-busy-card small {
  color: #8faabd;
}
.uc-ocr-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #21485e;
  border-top-color: #20dfc1;
  border-radius: 50%;
  animation: uc-ocr-spin 0.8s linear infinite;
}
@keyframes uc-ocr-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------------------
 * Dialog standard: every <dialog> in the app (company side and /platform) shares
 * the look of the user-menu dialogs (.uc-account-modal, account-modal.css):
 * #101d28 surface, #355066 border, 3px teal top accent, 14px radius, deep shadow,
 * dark backdrop, entrance animation, a #142635 header bar with a close button and
 * a #142635 footer bar. Several page stylesheets define their own dialog frame
 * with equal or higher specificity, hence the !important on the frame properties.
 * ------------------------------------------------------------------------- */
dialog:not(.uc-account-modal):not(.su-dialog) {
  border: 1px solid #355066 !important;
  border-top: 3px solid var(--teal, #19e6c0) !important;
  border-radius: 14px !important;
  background: #101d28 !important;
  color: var(--text, #ecf4ff);
  box-shadow:
    0 0 0 1px rgba(25, 230, 192, 0.12),
    0 28px 90px rgba(0, 0, 0, 0.8) !important;
  overflow: hidden;
}
dialog[open]:not(.uc-account-modal):not(.su-dialog) {
  animation: uc-dialog-standard-in 160ms ease-out;
}
dialog:not(.uc-account-modal):not(.su-dialog)::backdrop {
  background: rgba(1, 6, 11, 0.8) !important;
}
dialog:not(.uc-account-modal):not(.su-dialog) > header,
dialog:not(.uc-account-modal):not(.su-dialog) > form > header {
  background: #142635 !important;
  border-bottom: 1px solid #355066 !important;
}
dialog:not(.uc-account-modal):not(.su-dialog) > footer,
dialog:not(.uc-account-modal):not(.su-dialog) > form > footer {
  background: #142635 !important;
  border-top: 1px solid #355066 !important;
}
@keyframes uc-dialog-standard-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog[open]:not(.uc-account-modal):not(.su-dialog) {
    animation: none;
  }
}

/* Dialog close buttons: center the x glyph in the square. */
dialog .icon-close,
dialog .uc-dialog-close,
dialog .su-dialog-close,
dialog .dialog-x,
dialog .uc-account-modal-close,
.uc-account-modal .uc-account-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-align: center;
}

/* The x is drawn with two bars rather than a text glyph, so it is centered in the
   box whatever font the platform renders "×" with (it sat low on Windows fonts). */
dialog .icon-close,
dialog .uc-dialog-close,
dialog .su-dialog-close,
dialog .dialog-x,
dialog .uc-account-modal-close,
.uc-account-modal .uc-account-modal-close {
  position: relative;
  font-size: 0 !important;
}
dialog .icon-close::before,
dialog .icon-close::after,
dialog .uc-dialog-close::before,
dialog .uc-dialog-close::after,
dialog .su-dialog-close::before,
dialog .su-dialog-close::after,
dialog .dialog-x::before,
dialog .dialog-x::after,
dialog .uc-account-modal-close::before,
dialog .uc-account-modal-close::after,
.uc-account-modal .uc-account-modal-close::before,
.uc-account-modal .uc-account-modal-close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
dialog .icon-close::after,
dialog .uc-dialog-close::after,
dialog .su-dialog-close::after,
dialog .dialog-x::after,
dialog .uc-account-modal-close::after,
.uc-account-modal .uc-account-modal-close::after {
  transform: rotate(-45deg);
}

/* Company catalog dialogs (Add/Edit Labor Classification, Employee, Crew, Activity):
   one header (eyebrow, title, x) and one Save button style, the same as the platform
   Create buttons. */
.catalog-dialog > form > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 14px 22px;
}
.catalog-dialog > form > header h3 {
  margin: 0;
  font-size: 20px;
}
.catalog-dialog .uc-account-modal-eyebrow {
  margin: 0 0 2px;
  color: var(--teal, #19e6c0);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.catalog-dialog .dialog-x {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid #355066;
  border-radius: 8px;
  background: #0b1722;
  color: #c7d5e2;
  cursor: pointer;
}
.catalog-dialog .dialog-x:hover,
.catalog-dialog .dialog-x:focus-visible {
  border-color: var(--teal, #19e6c0);
  color: var(--teal, #19e6c0);
}
.catalog-dialog > form > footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 22px;
}
.catalog-dialog > form > footer .btn.primary {
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  background: #3aa0ff;
  color: #04121f;
  font-weight: 600;
}
.catalog-dialog > form > footer .btn.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Dialog close buttons are focused when a dialog opens, which drew a second box (the focus ring)
   around some of them. They show focus with the teal border and glyph instead, so every one is a
   single box. */
dialog .icon-close,
dialog .uc-dialog-close,
dialog .su-dialog-close,
dialog .dialog-x,
dialog .uc-account-modal-close,
.uc-account-modal .uc-account-modal-close {
  outline: none !important;
  box-shadow: none !important;
}
dialog .icon-close:focus-visible,
dialog .uc-dialog-close:focus-visible,
dialog .su-dialog-close:focus-visible,
dialog .dialog-x:focus-visible,
dialog .uc-account-modal-close:focus-visible,
.uc-account-modal .uc-account-modal-close:focus-visible {
  border-color: var(--teal, #19e6c0) !important;
  color: var(--teal, #19e6c0) !important;
}

/* UC23: session-expired lock (assets/js/app-chrome.js). A modal <dialog>, so it
   sits above every other dialog (the AC, Estimate Builder panels) and blocks
   the whole page until the estimator signs in again. */
.uc-session-lock {
  max-width: 460px;
  width: calc(100vw - 32px);
  padding: 0;
  border: 1px solid var(--uc-warning);
  border-radius: var(--uc-radius-lg);
  background: var(--uc-surface);
  color: var(--uc-text);
  box-shadow: var(--uc-shadow);
  font-family: var(--uc-font);
}
.uc-session-lock::backdrop {
  background: rgba(1, 6, 11, 0.72) !important;
}
.uc-session-lock-card {
  padding: var(--uc-space-6);
}
.uc-session-lock-card h2 {
  margin: 0 0 var(--uc-space-3);
  font-size: 18px;
  color: var(--uc-warning);
}
.uc-session-lock-card p {
  margin: 0 0 var(--uc-space-3);
  line-height: 1.45;
  color: var(--uc-text-muted);
}
.uc-session-lock-status:empty {
  display: none;
}
.uc-session-lock-status {
  color: var(--uc-text) !important;
}
.uc-session-lock-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--uc-space-4);
}
.uc-session-lock-signin {
  min-height: var(--uc-control-height);
  padding: 0 var(--uc-space-6);
  border: 0;
  border-radius: var(--uc-radius-md);
  background: var(--uc-blue);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.uc-session-lock-signin:hover {
  filter: brightness(1.1);
}