/* Gridian WMS — fundação visual canônica.
 *
 * Esta camada encerra a cascata do desktop e oferece um único vocabulário para as
 * próximas fases. Os aliases --fm-* e os quatro tokens legados de 01-base.css são
 * mantidos para que as telas existentes adotem a identidade sem troca de markup.
 * Login, documentos de impressão e coletor conservam seus contextos próprios.
 */
:root{
  color-scheme:light;

  /* Marca e superfícies */
  --wms-brand-dark:#12383d;
  --wms-brand:#086d78;
  --wms-brand-hover:#065a63;
  --wms-brand-light:#e8f3f4;
  --wms-accent:#e7a91b;
  --wms-background:#f3f7f7;
  --wms-surface:#ffffff;
  --wms-surface-subtle:#f7fafa;
  --wms-border:#d7e2e3;
  --wms-border-strong:#b7c9cb;

  /* Texto e estados */
  --wms-text:#17363a;
  --wms-text-secondary:#60787c;
  --wms-success:#16835b;
  --wms-success-bg:#e8f5ee;
  --wms-info:#2878b8;
  --wms-info-bg:#eaf3fa;
  --wms-warning:#c77a0a;
  --wms-warning-bg:#fff4df;
  --wms-danger:#c44737;
  --wms-danger-bg:#fcebe8;
  --wms-neutral:#60787c;
  --wms-neutral-bg:#f0f4f4;

  /* Tipografia */
  --wms-font:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --wms-font-mono:"Cascadia Mono","Segoe UI Mono",Consolas,monospace;
  --wms-leading-tight:1.2;
  --wms-leading-normal:1.5;

  /* Escala espacial 4 / 8 / 12 / 16 / 24 / 32 / 40 */
  --wms-space-1:4px;
  --wms-space-2:8px;
  --wms-space-3:12px;
  --wms-space-4:16px;
  --wms-space-6:24px;
  --wms-space-8:32px;
  --wms-space-10:40px;

  /* Forma, profundidade e movimento */
  --wms-radius-sm:8px;
  --wms-radius:10px;
  --wms-radius-lg:12px;
  --wms-shadow-sm:0 1px 2px rgba(18,56,61,.06);
  --wms-shadow-md:0 8px 24px rgba(18,56,61,.08);
  --wms-focus:0 0 0 3px rgba(8,109,120,.22);
  --wms-transition:150ms ease;

  /* Compatibilidade: componentes existentes passam a consumir a fonte canônica. */
  --fm-primary:var(--wms-brand);
  --fm-primary-dark:var(--wms-brand-dark);
  --fm-primary-hover:var(--wms-brand-hover);
  --fm-primary-soft:var(--wms-brand-light);
  --fm-primary-ring:rgba(8,109,120,.22);
  --fm-accent:var(--wms-accent);
  --fm-success:var(--wms-success);
  --fm-success-strong:#116b49;
  --fm-success-soft:var(--wms-success-bg);
  --fm-info:var(--wms-info);
  --fm-info-strong:#1e6095;
  --fm-info-soft:var(--wms-info-bg);
  --fm-warning:var(--wms-warning);
  --fm-warning-strong:#945b07;
  --fm-warning-soft:var(--wms-warning-bg);
  --fm-danger:var(--wms-danger);
  --fm-danger-strong:#9f382c;
  --fm-danger-soft:var(--wms-danger-bg);
  --fm-purple:#7050b8;
  --fm-purple-soft:#f3effc;
  --fm-neutral:var(--wms-neutral);
  --fm-neutral-soft:var(--wms-neutral-bg);
  --fm-bg:var(--wms-background);
  --fm-surface:var(--wms-surface);
  --fm-surface-alt:var(--wms-surface-subtle);
  --fm-border:var(--wms-border);
  --fm-border-strong:var(--wms-border-strong);
  --fm-text:var(--wms-text);
  --fm-text-muted:var(--wms-text-secondary);
  --fm-muted:var(--wms-text-secondary);
  --fm-shadow-sm:var(--wms-shadow-sm);
  --fm-shadow-md:var(--wms-shadow-md);
  --fm-radius-sm:var(--wms-radius-sm);
  --fm-radius:var(--wms-radius);
  --fm-radius-lg:var(--wms-radius-lg);
  --fm-space-1:var(--wms-space-1);
  --fm-space-2:var(--wms-space-2);
  --fm-space-3:var(--wms-space-3);
  --fm-space-4:var(--wms-space-4);
  --fm-space-6:var(--wms-space-6);
  --fm-space-8:var(--wms-space-8);
  --fm-space-10:var(--wms-space-10);
  --b:var(--wms-brand);
  --i:var(--wms-text);
  --l:var(--wms-border);
  --m:var(--wms-text-secondary);
}

body{
  background:var(--wms-background);
  color:var(--wms-text);
  font-family:var(--wms-font);
  line-height:var(--wms-leading-normal);
  text-rendering:optimizeLegibility;
}

::selection{background:var(--wms-brand-light);color:var(--wms-brand-dark)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--wms-brand);
  outline-offset:2px;
}

/* Cabeçalho de página */
.wms-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--wms-space-4);
  margin:0 0 var(--wms-space-6);
}
.wms-page-header__title{
  margin:0;
  color:var(--wms-brand-dark);
  font-size:clamp(22px,2vw,28px);
  font-weight:720;
  line-height:var(--wms-leading-tight);
  letter-spacing:-.025em;
}
.wms-page-header__subtitle{
  margin:var(--wms-space-2) 0 0;
  max-width:72ch;
  color:var(--wms-text-secondary);
  font-size:13px;
}

/* Superfícies e seções */
.wms-section,.wms-card{
  border:1px solid var(--wms-border);
  border-radius:var(--wms-radius-lg);
  background:var(--wms-surface);
  box-shadow:var(--wms-shadow-sm);
}
.wms-section{padding:var(--wms-space-6)}
.wms-card{padding:var(--wms-space-4)}
.wms-card--interactive{
  cursor:pointer;
  transition:border-color var(--wms-transition),box-shadow var(--wms-transition),transform var(--wms-transition);
}
.wms-card--interactive:hover{
  border-color:var(--wms-border-strong);
  box-shadow:var(--wms-shadow-md);
  transform:translateY(-1px);
}
.wms-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--wms-space-3);
  margin:0 0 var(--wms-space-4);
  padding:0 0 var(--wms-space-3);
  border-bottom:1px solid var(--wms-border);
}
.wms-card__header h2,.wms-card__header h3{margin:0;color:var(--wms-brand-dark)}

/* KPIs */
.wms-kpi{
  position:relative;
  display:grid;
  gap:var(--wms-space-2);
  min-height:116px;
  padding:var(--wms-space-4);
  overflow:hidden;
  border:1px solid var(--wms-border);
  border-radius:var(--wms-radius-lg);
  background:var(--wms-surface);
  box-shadow:var(--wms-shadow-sm);
}
.wms-kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--wms-brand)}
.wms-kpi__label{color:var(--wms-text-secondary);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.wms-kpi__value{color:var(--wms-brand-dark);font-size:30px;font-weight:760;line-height:1;font-variant-numeric:tabular-nums}
.wms-kpi__context{color:var(--wms-text-secondary);font-size:12px}
.wms-kpi--success::before{background:var(--wms-success)}
.wms-kpi--info::before{background:var(--wms-info)}
.wms-kpi--warning::before{background:var(--wms-warning)}
.wms-kpi--danger::before{background:var(--wms-danger)}

/* Status: texto/ícone continuam obrigatórios; cor nunca é o único sinal. */
.wms-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  padding:5px 9px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--wms-neutral-bg);
  color:var(--wms-neutral);
  font-size:11px;
  font-weight:720;
  line-height:1.1;
  white-space:nowrap;
}
.wms-badge--success{border-color:#b9decb;background:var(--wms-success-bg);color:var(--wms-success)}
.wms-badge--info{border-color:#bfd9ec;background:var(--wms-info-bg);color:var(--wms-info)}
.wms-badge--warning{border-color:#efd39d;background:var(--wms-warning-bg);color:var(--wms-warning)}
.wms-badge--danger{border-color:#edc1ba;background:var(--wms-danger-bg);color:var(--wms-danger)}
.wms-badge--neutral{border-color:var(--wms-border);background:var(--wms-neutral-bg);color:var(--wms-neutral)}

/* Ações */
.wms-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--wms-space-2);
  min-height:40px;
  padding:9px 14px;
  border:1px solid transparent;
  border-radius:var(--wms-radius-sm);
  font:650 13px/1 var(--wms-font);
  cursor:pointer;
  transition:background var(--wms-transition),border-color var(--wms-transition),color var(--wms-transition),box-shadow var(--wms-transition);
}
.wms-button--primary{background:var(--wms-brand);color:#fff}
.wms-button--primary:hover{background:var(--wms-brand-hover)}
.wms-button--secondary{border-color:var(--wms-border);background:var(--wms-neutral-bg);color:var(--wms-brand-dark)}
.wms-button--secondary:hover{border-color:var(--wms-border-strong);background:#e7eeee}
.wms-button--outline{border-color:var(--wms-brand);background:#fff;color:var(--wms-brand)}
.wms-button--outline:hover{background:var(--wms-brand-light)}
.wms-button--danger{background:var(--wms-danger);color:#fff}
.wms-button--danger:hover{background:#a93a2d}
.wms-button--ghost{background:transparent;color:var(--wms-brand)}
.wms-button--ghost:hover{background:var(--wms-brand-light)}
.wms-button:disabled,.wms-button[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.wms-button:focus-visible{outline:2px solid var(--wms-brand);outline-offset:2px;box-shadow:var(--wms-focus)}

/* Barras de ação e tabelas densas */
.wms-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--wms-space-3);margin:0 0 var(--wms-space-4)}
.wms-toolbar__actions{display:flex;align-items:center;gap:var(--wms-space-2);flex-wrap:wrap}
.wms-table-wrap{overflow:auto;border:1px solid var(--wms-border);border-radius:var(--wms-radius);background:var(--wms-surface)}
.wms-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.wms-table th{
  padding:var(--wms-space-3) var(--wms-space-4);
  border-bottom:1px solid var(--wms-border-strong);
  background:var(--wms-surface-subtle);
  color:var(--wms-text-secondary);
  font-size:11px;
  font-weight:720;
  letter-spacing:.025em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
}
.wms-table td{padding:var(--wms-space-3) var(--wms-space-4);border-bottom:1px solid var(--wms-border);vertical-align:middle}
.wms-table tbody tr:nth-child(even){background:#fbfdfd}
.wms-table tbody tr:hover{background:var(--wms-brand-light)}
.wms-table .is-number{text-align:right;font-variant-numeric:tabular-nums}

/* Feedback e estado vazio */
.wms-alert{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--wms-space-3);
  padding:var(--wms-space-3) var(--wms-space-4);
  border:1px solid #bfd9ec;
  border-left:4px solid var(--wms-info);
  border-radius:var(--wms-radius);
  background:var(--wms-info-bg);
  color:var(--wms-brand-dark);
}
.wms-alert--success{border-color:#b9decb;border-left-color:var(--wms-success);background:var(--wms-success-bg)}
.wms-alert--warning{border-color:#efd39d;border-left-color:var(--wms-warning);background:var(--wms-warning-bg)}
.wms-alert--danger{border-color:#edc1ba;border-left-color:var(--wms-danger);background:var(--wms-danger-bg)}
.wms-alert__title{display:block;margin:0 0 2px;font-weight:720}
.wms-alert p{margin:0;color:var(--wms-text-secondary)}
.wms-empty-state{display:grid;place-items:center;gap:var(--wms-space-2);min-height:140px;padding:var(--wms-space-8);text-align:center;color:var(--wms-text-secondary)}
.wms-empty-state strong{color:var(--wms-brand-dark);font-size:15px}
.wms-empty-state p{max-width:54ch;margin:0}

/* Fase 2: acabamento do shell administrativo. Escopo exclui login, coletor e impressão. */
@media screen{
  #app>nav{background:var(--wms-brand-dark);border-right:1px solid #0d2b30}
  #app>nav::before,#app.sidebar-collapsed>nav::before{border-bottom-color:#34555a}
  #app>nav .menu>button,#app>nav .menu-items button,#app>nav .desktop-config,#app>nav .desktop-collapse{
    min-height:40px;border-radius:var(--wms-radius-sm);transition:background var(--wms-transition),color var(--wms-transition),box-shadow var(--wms-transition)
  }
  #app>nav .menu>button,#app>nav .menu-items button{color:#dce9e8!important}
  #app>nav .menu>button:not(.active-nav):hover,#app>nav .menu-items button:not(.active-nav):hover,#app>nav .menu>button:not(.active-nav):focus-visible,#app>nav .menu-items button:not(.active-nav):focus-visible{
    background:#285158!important;color:#fff!important
  }
  #app>nav .menu>button.active-nav,#app>nav .menu-items button.active-nav,#app>nav .fm-stock-children button.active-stock-child,#app>nav .menu:has(.menu-items button.active-nav)>button.group-toggle{
    background:color-mix(in srgb,var(--wms-brand) 88%,white 12%)!important;
    color:#fff!important;
    border-radius:var(--wms-radius-sm);
    box-shadow:inset 3px 0 0 var(--wms-accent),0 0 0 1px rgba(255,255,255,.08)!important;
    font-weight:750
  }
  #app>nav .menu>button.active-nav:hover,#app>nav .menu-items button.active-nav:hover,#app>nav .fm-stock-children button.active-stock-child:hover{background:color-mix(in srgb,var(--wms-brand) 88%,white 12%)!important}
  #app>nav .menu>button.active-nav .fm-sidebar-icon,#app>nav .menu:has(.menu-items button.active-nav)>button.group-toggle .fm-sidebar-icon{color:#fff!important}
  #app>nav .menu.expanded>button.group-toggle{color:#fff!important}
  #app>nav .menu-items{border-left-color:#476a6e!important}
  #app>nav .fm-sidebar-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}
  #app>nav .fm-sidebar-caret{margin-left:auto;color:#bed2d2}
  #app.sidebar-collapsed>nav .menu-items{display:none!important}
  #app.sidebar-collapsed>nav .menu>button{justify-content:center}

  #app header{min-width:0;border-bottom:1px solid var(--wms-border);background:var(--wms-surface)}
  #app header .desktop-operation{min-width:0;max-width:295px}
  #app header .operation-header-button{min-width:0;max-width:100%;min-height:42px;border-color:var(--wms-border);border-radius:var(--wms-radius-sm);background:var(--wms-surface);color:var(--wms-text)!important}
  #app header .operation-header-button:hover:not(:disabled){border-color:var(--wms-brand);background:var(--wms-brand-light)}
  #app header .wms-operation-context{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;line-height:1.05}
  #app header .wms-operation-client,#app header .wms-operation-current{display:flex;max-width:245px;align-items:baseline;gap:7px;white-space:nowrap}
  #app header .wms-operation-client strong,#app header .wms-operation-current strong{max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wms-brand-dark)!important}
  #app header .wms-operation-client strong{font-size:13px;font-weight:750}
  #app header .wms-operation-current strong{font-size:11px;font-weight:650}
  #app header .wms-operation-label{min-width:50px;color:var(--wms-text-secondary);font-size:10px;font-weight:650;letter-spacing:.025em;text-transform:uppercase}
  #app header .desktop-top-actions{min-width:0}

  #app #content .wms-page-header{align-items:center;gap:var(--wms-space-4);margin-bottom:var(--wms-space-4)}
  #app #content .wms-page-header .wms-page-header__title{color:var(--wms-brand-dark);font-size:clamp(21px,1.7vw,25px);font-weight:750;line-height:var(--wms-leading-tight)}
  #app #content .wms-page-header__subtitle{margin:5px 0 0;color:var(--wms-text-secondary);font-size:12px}

  #app #content .wms-button{min-height:38px;padding:8px 13px;border-radius:var(--wms-radius-sm);font:650 12px/1.2 var(--wms-font)}
  #app #content .wms-button--primary{border-color:var(--wms-brand);background:var(--wms-brand);color:#fff}
  #app #content .wms-button--primary:hover:not(:disabled){background:var(--wms-brand-hover);border-color:var(--wms-brand-hover);color:#fff}
  #app #content .wms-button--secondary{border-color:var(--wms-border-strong);background:var(--wms-neutral-bg);color:var(--wms-brand-dark)}
  #app #content .wms-button--outline{border-color:var(--wms-border-strong);background:#fff;color:var(--wms-brand)}
  #app #content .wms-button--danger{border-color:var(--wms-danger);background:var(--wms-danger);color:#fff}
  #app #content .wms-button--ghost{border-color:transparent;background:transparent;color:var(--wms-brand)}
  #app #content .wms-button--secondary:hover:not(:disabled),#app #content .wms-button--outline:hover:not(:disabled),#app #content .wms-button--ghost:hover:not(:disabled){background:var(--wms-brand-light);border-color:var(--wms-brand);color:var(--wms-brand-dark)}
  #app #content .wms-button--danger:hover:not(:disabled){background:#a93a2d;border-color:#a93a2d;color:#fff}
  #app #content .wms-button:disabled{opacity:.55;cursor:not-allowed}

  #app #content .wms-badge{border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700;line-height:1.15}
  #app #content .wms-badge--success{border-color:#b9decb;background:var(--wms-success-bg);color:var(--wms-success)}
  #app #content .wms-badge--info{border-color:#bfd9ec;background:var(--wms-info-bg);color:var(--wms-info)}
  #app #content .wms-badge--warning{border-color:#efd39d;background:var(--wms-warning-bg);color:var(--wms-warning)}
  #app #content .wms-badge--danger{border-color:#edc1ba;background:var(--wms-danger-bg);color:var(--wms-danger)}
  #app #content .wms-badge--neutral{border-color:var(--wms-border);background:var(--wms-neutral-bg);color:var(--wms-neutral)}

  #app #content .wms-table-wrap{border-color:var(--wms-border);border-radius:var(--wms-radius-sm)}
  #app #content .wms-table{font-variant-numeric:tabular-nums}
  #app #content .wms-table th{padding:9px 12px;border-bottom:1px solid var(--wms-border-strong);background:var(--wms-surface-subtle);color:var(--wms-text-secondary);font-size:11px;font-weight:720;letter-spacing:.025em}
  #app #content .wms-table td{padding:9px 12px;border-bottom:1px solid var(--wms-border);vertical-align:middle}
  #app #content .wms-table tbody tr:nth-child(even){background:#fbfdfd}
  #app #content .wms-table tbody tr:hover{background:var(--wms-brand-light)}
  #app #content .wms-table .wms-table-number{text-align:right;font-variant-numeric:tabular-nums}
}

@media screen and (max-width:1366px){
  #app header{gap:10px;padding-right:12px}
  #app header .desktop-operation{max-width:250px}
  #app header .wms-operation-client strong,#app header .wms-operation-current strong{max-width:130px}
}

@media(max-width:700px){
  .wms-page-header,.wms-toolbar{align-items:stretch;flex-direction:column}
  .wms-page-header__actions,.wms-toolbar__actions{width:100%}
  .wms-section{padding:var(--wms-space-4)}
}

@media(prefers-reduced-motion:reduce){
  .wms-card--interactive,.wms-button{transition:none}
  .wms-card--interactive:hover{transform:none}
}