/* public/css/companys.css | Company module (uploader + segmented + field clarity) */
/* v1.0.1 | GLIVE SOLUTIONS */

/* ========================= */
/* Inputs (clareza/contraste)*/
/* ========================= */
.form-fields{ display:grid; gap: var(--space-4); }
.field .label{
  display:inline-block; margin-bottom:.375rem;
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.input-wrap{
  display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:.25rem;
  background: var(--input-bg); border:1px solid var(--input-border); border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.input-wrap:focus-within{
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 var(--ring-width) var(--focus-ring);
  background: var(--surface-1);
}
.input-icon{ display:grid; place-items:center; color: var(--text-secondary); font-size:1.1rem; }
.input{
  width:100%; height:44px; border:0; outline:0; background:transparent;
  color: var(--input-fg); font-size: var(--fs-md); padding-right:.5rem;
}
.input::placeholder{ color: var(--input-placeholder); }
.input-action-space{ display:inline-flex; align-items:center; gap:.25rem; padding-right:.25rem; }

/* estados de erro (reuso) */
.input-wrap.is-invalid{
  border-color: var(--danger);
  box-shadow: 0 0 0 var(--ring-width) color-mix(in oklab, var(--danger) 40%, transparent);
}
.field-errors{
  margin-top:.375rem; font-size:var(--fs-xs); color:var(--danger);
  padding-left:.5rem; border-left:2px solid var(--danger);
}

/* ===================== */
/* Uploader (drag & drop)*/
/* ===================== */
.uploader{ display:grid; gap:.75rem; }
.uploader-drop{
  width:100%;
  border:1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: clamp(1rem, 4vw, var(--space-5));
  cursor:pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.uploader-drop:hover{
  border-color: var(--brand-600);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.uploader-drop:active{ transform: translateY(0); }
.uploader-drop:focus-visible{
  outline:none; box-shadow:0 0 0 var(--ring-width) var(--focus-ring);
}
.uploader-inner{
  display:flex; align-items:center; justify-content:center; gap: var(--space-4);
  flex-wrap:wrap; text-align:center;
}
.uploader-inner .mdi{ font-size:2rem; color: var(--text-secondary); }
.uploader-text{ display:grid; gap:.15rem; }
.uploader-text strong{ color: var(--text-primary); }
.uploader-text span{ color: var(--text-secondary); font-size: var(--fs-sm); }
.uploader-text small{ color: var(--text-secondary); font-size: var(--fs-xs); }

.uploader.is-dragover .uploader-drop{
  border-color: var(--brand-600);
  background: var(--brand-a15);
  box-shadow: 0 0 0 var(--ring-width) var(--focus-ring);
}

/* Preview compacto */
.uploader-preview{
  position:relative;
  display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:.75rem;
  padding:.5rem; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1);
}
.uploader-preview img{
  width:64px; height:64px; object-fit:cover; border-radius: var(--radius-sm); background: var(--surface-2);
}
.uploader-meta{
  min-width:0; color: var(--text-secondary); font-size: var(--fs-sm);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.uploader-reset{
  height:36px; width:36px; display:grid; place-items:center;
  border:1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-primary);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.uploader-reset:hover{
  background: var(--brand-a15); border-color: var(--brand-600); color: var(--brand-600);
  transform: translateY(-1px);
}

/* ===================== */
/* Segmented (status)    */
/* ===================== */
.segmented{
  display:inline-flex; gap:.25rem; padding:.25rem;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md);
}
.seg-btn{
  border:0; background:transparent; color: var(--text-secondary);
  padding:.5rem .875rem; border-radius: calc(var(--radius-md) - 4px);
  cursor:pointer; display:inline-flex; align-items:center; gap:.5rem;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.seg-btn .dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
.seg-btn .dot-ok{ background: var(--success); }
.seg-btn .dot-warn{ background: var(--warning); }
.seg-btn:hover{ color: var(--brand-700); transform: translateY(-1px); }
.seg-btn:focus-visible{ outline:none; box-shadow:0 0 0 var(--ring-width) var(--focus-ring); }
.seg-btn.is-active{
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: var(--shadow-1);
  border:1px solid var(--border);
}

/* primary action */
.btn.btn-primary{
  width:100%; height:44px; border:0; border-radius: var(--radius-md);
  margin-top: 10px;
  background: var(--btn-bg); color: var(--btn-fg); font-weight: var(--fw-semibold); box-shadow: var(--shadow-1);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.btn.btn-primary:hover{ background: var(--btn-bg-hover); transform: translateY(-1px); }
.login-page .btn[aria-busy="true"]{ opacity: var(--opacity-muted); pointer-events: none; }