/* =====================================================================
   ALPHA DESIGN ERP Cloud v4.8.0 — Global / Construction UI Polish
   Visual closure requested from field QA screenshots.
   Scope:
   - one refined searchable-select affordance (clear + chevron) everywhere
   - unified rounded Construction forms / expandable action panels
   - readable table headers and cells on iPad/iPhone/desktop
   - Dashboard delivery controls aligned as one right-side cluster
   - Dashboard Project Pulse customer/status width rebalance
   - DEMO bottom strip removed; top DEMO indicator remains canonical
   ===================================================================== */

/* ---------- 1. Global searchable-select affordance ---------- */
.searchable-combobox{--combo-action-size:30px;--combo-action-gap:4px}
.searchable-combobox-input{
  padding-right:calc(var(--combo-action-size) * 2 + var(--combo-action-gap) + 12px)!important;
  border-radius:11px!important;
}
.searchable-combobox:not(.is-clearable) .searchable-combobox-input{
  padding-right:calc(var(--combo-action-size) + 10px)!important;
}
.searchable-combobox-clear,
.searchable-combobox-toggle{
  width:var(--combo-action-size)!important;
  height:var(--combo-action-size)!important;
  min-width:var(--combo-action-size)!important;
  min-height:var(--combo-action-size)!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--muted,#64748b)!important;
  box-shadow:none!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important;
}
.searchable-combobox-toggle{right:3px!important}
.searchable-combobox-clear{right:calc(var(--combo-action-size) + var(--combo-action-gap) + 3px)!important}
.searchable-combobox-clear svg,
.searchable-combobox-toggle svg{
  width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.searchable-combobox-clear:hover,
.searchable-combobox-toggle:hover{
  background:color-mix(in srgb,var(--primary,#196f9d) 8%,var(--surface,#fff))!important;
  border-color:color-mix(in srgb,var(--primary,#196f9d) 18%,var(--line,#d5e2eb))!important;
  color:var(--primary,#196f9d)!important;
}
.searchable-combobox-clear:focus-visible,
.searchable-combobox-toggle:focus-visible{
  outline:0!important;
  border-color:color-mix(in srgb,var(--primary,#196f9d) 42%,var(--line,#d5e2eb))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#196f9d) 15%,transparent)!important;
}
.searchable-combobox.is-open .searchable-combobox-toggle svg{transform:rotate(180deg)}
.searchable-combobox.is-open .searchable-combobox-toggle span{transform:none!important}
html[data-theme="dark"] .searchable-combobox-clear,
html[data-theme="dark"] .searchable-combobox-toggle{background:transparent!important;color:#9fb5c1!important}
html[data-theme="dark"] .searchable-combobox-clear:hover,
html[data-theme="dark"] .searchable-combobox-toggle:hover{background:#173241!important;border-color:#335060!important;color:#d6ebf6!important}

/* Toolbar variants use the same geometry rather than legacy round glyphs. */
.combobox-toolbar .searchable-combobox-clear,
.combobox-filter .searchable-combobox-clear{right:35px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}
.combobox-toolbar .searchable-combobox-toggle,
.combobox-filter .searchable-combobox-toggle{right:3px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}
.combobox-toolbar .searchable-combobox-input,
.combobox-filter .searchable-combobox-input{padding-right:70px!important}
.combobox-toolbar:not(.is-clearable) .searchable-combobox-input,
.combobox-filter:not(.is-clearable) .searchable-combobox-input{padding-right:38px!important}

/* ---------- 2. Construction: one form / action visual language ---------- */
.construction-workspace{
  --construction-control-radius:11px;
  --construction-control-height:42px;
}
.construction-workspace :is(input,select,textarea,.searchable-combobox-input){
  width:100%;
  max-width:100%;
  border:1px solid var(--line,#d5e2eb)!important;
  border-radius:var(--construction-control-radius)!important;
  background:var(--surface,#fff)!important;
  color:var(--text,#102a43)!important;
  box-shadow:0 1px 2px rgba(15,42,67,.025)!important;
}
.construction-workspace :is(input,select,.searchable-combobox-input){min-height:var(--construction-control-height)!important;height:var(--construction-control-height)!important}
.construction-workspace textarea{min-height:78px!important;padding:10px 12px!important;line-height:1.45!important}
.construction-workspace :is(input,select):focus,
.construction-workspace textarea:focus,
.construction-workspace .searchable-combobox-input:focus,
.construction-workspace .searchable-combobox.is-open .searchable-combobox-input{
  outline:0!important;border-color:var(--alpha-cyan-500,#208bc4)!important;box-shadow:0 0 0 3px rgba(18,182,210,.12)!important;
}

/* Native disclosure triangle is removed. A compact rounded chevron lives in the
   summary's right edge, matching the search/select controls. */
.construction-workspace details>summary{
  list-style:none!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:44px!important;
  margin:0!important;
  padding:7px 8px 7px 12px!important;
  border-radius:10px!important;
  color:var(--text,#102a43)!important;
  font-weight:750!important;
  cursor:pointer!important;
  user-select:none;
}
.construction-workspace details>summary::-webkit-details-marker{display:none!important}
.construction-workspace details>summary::marker{content:""!important;font-size:0!important}
.construction-workspace details>summary::after{
  content:"";
  width:30px;height:30px;min-width:30px;margin-left:auto;
  border:1px solid var(--line,#d5e2eb);border-radius:8px;
  background:var(--surface,#fff);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%2364788b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
  box-shadow:0 1px 2px rgba(15,42,67,.025);
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease;
}
.construction-workspace details[open]>summary::after{transform:rotate(180deg)}
.construction-workspace details>summary:hover::after{background-color:color-mix(in srgb,var(--primary,#196f9d) 7%,var(--surface,#fff));border-color:color-mix(in srgb,var(--primary,#196f9d) 20%,var(--line,#d5e2eb))}
.construction-workspace details>summary:focus-visible{outline:0!important;box-shadow:0 0 0 3px rgba(18,182,210,.12)!important}
.construction-workspace details[open]>summary{border-bottom-left-radius:7px!important;border-bottom-right-radius:7px!important}

/* Every Construction create/edit action is rounded and visually intentional. */
.construction-workspace form button,
.construction-workspace details button,
.construction-workspace .construction-c13__toolbar button,
.construction-workspace .table-wrap button{
  min-height:38px!important;
  border-radius:10px!important;
  font-weight:700!important;
}
.construction-workspace form button[type="submit"]{
  border:1px solid color-mix(in srgb,var(--primary,#196f9d) 78%,#124d6d)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary,#196f9d) 90%,#fff),var(--primary,#196f9d))!important;
  color:#fff!important;
  box-shadow:0 4px 12px rgba(8,118,145,.12)!important;
}
.construction-workspace form button[type="submit"]:hover{filter:brightness(.97)}
.construction-workspace :is(.construction-c3__panel,.construction-c4__panel,.construction-c5__panel,.construction-c11__panel,.construction-c12__panel,.construction-c6__quick details,.construction-c7__quick details){padding:8px!important}
.construction-workspace details>form{margin-top:6px!important;padding:4px!important}

/* QA/QC and HSE quick-entry panels are dense but still readable. */
.construction-workspace :is(.construction-c6__quick,.construction-c7__quick){gap:12px!important;align-items:start}
.construction-workspace :is(.construction-c6__quick details,.construction-c7__quick details){overflow:visible!important}
.construction-workspace :is(.construction-c6__quick form,.construction-c7__quick form){gap:9px!important}

/* Construction tables use the same rounded grid controls as the rest of ERP. */
.construction-workspace .alpha-grid-control{border-radius:10px!important;min-height:36px!important;padding:7px 10px!important}
.construction-workspace .table-wrap{border-radius:12px!important}

/* ---------- 3. Global table readability / responsive integrity ---------- */
#appShell .table-wrap table:not(.alpha-card-view) thead th,
#appShell table.alpha-data-grid:not(.alpha-card-view) thead th{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:none!important;
  line-height:1.28!important;
  min-height:44px!important;
  max-width:none!important;
}
#appShell .table-wrap table:not(.alpha-card-view) td.table-col-text,
#appShell .table-wrap table:not(.alpha-card-view) td.table-col-primary,
#appShell .table-wrap table:not(.alpha-card-view) td.table-col-status{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:none!important;
}
#appShell .table-wrap table:not(.alpha-card-view) td.table-col-numeric,
#appShell .table-wrap table:not(.alpha-card-view) td.numeric,
#appShell .table-wrap table:not(.alpha-card-view) td.table-col-date{white-space:nowrap!important}

/* On tablet/mobile, wide tables scroll inside their card instead of squeezing
   9–12 columns until headings become unreadable. */
@media(max-width:1439px){
  #appShell .table-wrap{overflow-x:auto!important;overscroll-behavior-inline:contain!important;-webkit-overflow-scrolling:touch}
  #appShell table.table-columns-9,
  #appShell table.table-columns-10,
  #appShell table.table-columns-11,
  #appShell table.table-columns-12,
  #appShell table.table-columns-13,
  #appShell table.table-columns-14,
  #appShell table.table-columns-15{
    min-width:max(var(--table-mobile-min,1080px),100%)!important;
  }
}
@media(max-width:820px){
  #appShell .table-wrap table:not(.alpha-card-view) thead th{font-size:10px!important;padding:9px 10px!important}
  #appShell .table-wrap table:not(.alpha-card-view) tbody td{font-size:11px!important;padding:9px 10px!important;line-height:1.4!important}
}

/* ---------- 4. Dashboard control and Project Pulse layout ---------- */
.executive-delivery-heading{justify-content:flex-start!important;flex-wrap:wrap!important}
.executive-delivery-heading>div:first-child{margin-right:auto!important}
.executive-delivery-heading>.dashboard-scope-switch{margin-left:auto!important;flex:0 0 auto!important}
.executive-delivery-heading>.alpha-chart-periods{margin-left:4px!important;flex:0 0 auto!important}
.executive-delivery-heading>.dashboard-scope-switch,
.executive-delivery-heading>.alpha-chart-periods{align-self:flex-start}
.executive-delivery-heading>.dashboard-scope-switch button,
.executive-delivery-heading>.alpha-chart-periods button{border-radius:8px!important}
.executive-project-table-card .table-dashboard-projects .dashboard-col-project{width:20%!important}
.executive-project-table-card .table-dashboard-projects .dashboard-col-client{width:22%!important}
.executive-project-table-card .table-dashboard-projects .dashboard-col-progress{width:18%!important}
.executive-project-table-card .table-dashboard-projects .dashboard-col-contract{width:17%!important}
.executive-project-table-card .table-dashboard-projects .dashboard-col-cost{width:16%!important}
.executive-project-table-card .table-dashboard-projects .dashboard-col-status{width:7%!important}
.executive-project-table-card .table-dashboard-projects td:last-child,
.executive-project-table-card .table-dashboard-projects th:last-child{min-width:86px!important}
.executive-project-table-card .table-dashboard-projects td:nth-child(2),
.executive-project-table-card .table-dashboard-projects th:nth-child(2){min-width:190px!important}

@media(max-width:820px){
  .executive-delivery-heading>.dashboard-scope-switch,
  .executive-delivery-heading>.alpha-chart-periods{width:100%!important;margin-left:0!important}
  .executive-delivery-heading>.dashboard-scope-switch button,
  .executive-delivery-heading>.alpha-chart-periods button{flex:1}
}

/* ---------- 5. Remove redundant DEMO bottom strip ---------- */
.production-guard-banner.demo{display:none!important}
body:not(.production-readonly) #appShell .content{padding-bottom:34px!important}

/* ---------- 6. Login copy cleanup ---------- */
.login-card-head p,
.login-card>small{display:none!important}
.login-card{gap:16px!important}

/* Dark mode parity for new Construction disclosure controls. */
html[data-theme="dark"] .construction-workspace details>summary::after{
  background-color:#102936;border-color:#334e5d;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23a9c2cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}