/* iTECH CRM · interaction stability + everyday usability · 2026-10-04 */
:root{--ux-surface:#0a192d;--ux-surface-2:#0d2239;--ux-line:#263f5b;--ux-line-hover:#4c7ea7;--ux-muted:#88a0b8;--ux-text:#eef6ff}

/* Do not move controls out from under the mouse. This removes hover flicker. */
@media (hover:hover){
  .nav button:hover,.primary:hover,.q:hover,.request-card:hover,.catalog-item:hover,
  .warehouse-kind-tabs button:hover,.wh-site-pick button:hover,.warehouse-product-card:hover,
  .finance-cards article:hover,.ops-launch-card:hover,.new-order-catalog-results>button:hover,
  .client-message-action:hover,.client-detail-card [data-client-message]:hover,
  .os-bus-recent>article[role="button"]:hover{
    transform:none!important;filter:none!important
  }
}
.nav button,.primary,.ghost,.open,.q,.request-card,.catalog-item,.warehouse-kind-tabs button,
.wh-site-pick button,.warehouse-product-card,.finance-cards article,.ops-launch-card,
.new-order-catalog-results>button,.client-row-click{
  transition:background-color .10s ease,border-color .10s ease,color .10s ease,box-shadow .10s ease!important
}

/* Popovers/dropdowns stay on one compositor layer and do not flash. */
.notification-popover,.reminder-popover,.mini-calendar-pop,.order-context-menu,
.orders-more-actions>div,.module-more-actions>div,.order-actions-menu>div,.itech-status-menu-portal,
.ui-select-portal,.ui-details-panel{
  animation:none!important;backface-visibility:hidden;isolation:isolate;transform:none!important;
  will-change:auto!important;contain:paint
}
.itech-status-picker.open .itech-status-menu{animation:none!important}

/* Calm desktop shell. */
@media(min-width:1051px){
  .app{grid-template-columns:224px minmax(0,1fr)!important}
  .side{padding:12px 9px!important;background:#071426!important;backdrop-filter:none!important;box-shadow:none!important}
  .nav{gap:2px!important}
  .nav button{min-height:43px!important;border-radius:9px!important;padding:6px 8px!important}
  .nav button:hover{background:#0d2238!important;border-color:#284661!important}
  .nav button.active{background:#123150!important;border-color:#3a6991!important;box-shadow:none!important}
  .nav i{background:#0b2038!important;border-color:#264560!important;border-radius:8px!important}
  .nav button.active i{background:#185b92!important;border-color:#4f93c7!important}
  .content{padding:14px 18px 36px!important}
}
.top{backdrop-filter:none!important;background:#08162a!important;box-shadow:none!important}
.workspace-hero{padding:13px 15px!important;border-radius:13px!important;background:#0b1d34!important;box-shadow:none!important}
.workspace-hero h1{font-size:24px!important}.workspace-hero p{color:#8ea4bb!important}
.panel{border-radius:13px!important;background:#09192e!important;box-shadow:none!important}

/* Orders: hierarchy, compact filters, even cards. */
#orders .order-lifecycle-tabs,#orders .orders-tabs,#orders .order-fast-filters{
  border-color:#243e59!important;background:#081728!important;box-shadow:none!important
}
#orders .order-lifecycle-tabs button,#orders .orders-tabs button,#orders .order-fast-filters button{
  border-radius:8px!important;box-shadow:none!important
}
#orders .order-lifecycle-tabs button.active,#orders .orders-tabs button.active,#orders .order-fast-filters button.active{
  background:#17436b!important;border-color:#4b88b9!important;box-shadow:none!important
}
#orders .order-advanced-filters>summary{background:#0b1f35!important;border-color:#2b4a67!important;color:#b8cde0!important}
#orders .order-advanced-filters[open]>summary{background:#123657!important;border-color:#4e8bbb!important}
#orders .order-advanced-filter-body{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;gap:12px!important;padding:11px!important;background:#081728!important;border-color:#233d58!important}
#orders .order-advanced-filter-body .source-filter-shell{margin:0!important}
#orders .order-type-filters{margin:0!important;align-content:start}
#orders .source-filters button,#orders .order-type-filters button{min-height:32px!important;border-radius:8px!important;background:#0d1d30!important}
#orders .source-filters button:hover,#orders .order-type-filters button:hover{background:#102a45!important;border-color:#467ca6!important}
#orders .source-filters button.active,#orders .order-type-filters button.active{background:#17436b!important;border-color:#4f92c5!important;box-shadow:none!important}
#orders .panel-head{padding:11px 13px!important;border-bottom-color:#213a55!important}
#orders .panel-head h2{font-size:17px!important}
#orders .toolbar label,#orders .toolbar>select,#orders .toolbar>.ui-select{background:#07172a!important;border-color:#294764!important}
#orders .table-wrap{background:#071629!important}
#orders thead th{background:#08182b!important;color:#7891aa!important;border-bottom-color:#29445f!important}
#orders tbody tr{transition:background-color .08s ease!important}
#orders tbody tr:hover{background:#0d243b!important}
#orders tbody tr:hover td{background:transparent!important}
#orders tbody tr.is-selected{background:#102e4b!important}
#orders .order-row-actions>*{box-shadow:none!important}
#orders .order-actions-menu>summary{background:#0c2137!important;border-color:#2a4a67!important;color:#c8d9e8!important}
#orders .order-actions-menu>summary:hover{background:#11304e!important;border-color:#477ca4!important}
.order-filter-state>span{background:#0a1e33!important;border-color:#294864!important;color:#a8bfd3!important}

/* Five KPI cards should form a complete row on a wide monitor. */
@media(min-width:1380px){#orders .quick{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(min-width:900px) and (max-width:1379px){#orders .quick{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
#orders .q{border-radius:11px!important;background:#0a1c31!important;box-shadow:none!important}
#orders .q:hover{background:#0e2741!important;border-color:#44799f!important;box-shadow:none!important}

/* Settings: easier to scan. */
.settings-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:9px!important}
.settings-grid article{min-height:150px!important;border-radius:13px!important;background:#0a1b30!important;border-color:#263f5a!important;box-shadow:none!important}
.settings-grid article:hover{border-color:#3e6889!important;background:#0c2138!important}
.settings-toolbar{border-radius:12px!important;background:#08182c!important;backdrop-filter:none!important}
.itechpay-settings-card{border-color:#35658a!important;background:#0b223b!important}

/* Inputs and focus are clear but not flashy. */
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 2px rgba(84,164,220,.16)!important;border-color:#5794bd!important}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #67b8ec!important;outline-offset:2px!important}

/* Prevent hover/selection decorations from changing geometry. */
.nav button:hover,.q:hover,.request-card:hover,.warehouse-product-card:hover,.finance-cards article:hover,
.ops-launch-card:hover,.new-order-catalog-results>button:hover,.catalog-item:hover{margin:0!important}

@media(max-width:1050px){
  #orders .order-advanced-filter-body{grid-template-columns:1fr!important}
}
@media(max-width:720px){
  .workspace-hero{padding:12px!important}
  #orders .quick{grid-template-columns:1fr 1fr!important}
  #orders .order-advanced-filter-body{padding:8px!important}
}
@media(max-width:460px){#orders .quick{grid-template-columns:1fr!important}}

/* Respect reduced motion and keep the CRM stable on remote/older displays. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}