/* File: assets/css/skins/skin-black-white.css
   SFV Skin: Black → White (neutro)
   - 100% tokenizada
   - sem estilos híbridos de componente
   - skin define apenas TOKENS GLOBAIS e TOKENS CONTEXTUAIS padrão
*/

#sfv-prestador-app,
#sfv-area-prestador,
#sfv-area-cliente,
#sfv-fila-publica,
.sfv-scope{
  /* ======================================================
     TOKENS GLOBAIS DE COR
     ====================================================== */

  /* Fundo / superfícies */
  --sfv-color-bg: #0b0c10;
  --sfv-color-surface: #151821;
  --sfv-color-surface-2: #1c202b;
  --sfv-color-surface-3: #222837;

  /* Texto */
  --sfv-color-text: #fff6f5;
  --sfv-color-text-strong: #ffffff;
  --sfv-color-text-muted: rgba(245,247,255,.70);
  --sfv-color-text-soft: rgba(245,247,255,.50);
  --sfv-color-heading: #ffffff;

  /* Borda / divisores */
  --sfv-color-border: rgba(245,247,255,.22);
  --sfv-color-border-strong: rgba(245,247,255,.28);
  --sfv-color-divider: rgba(245,247,255,.14);
  --sfv-color-divider-strong: rgba(245,247,255,.28);
  --sfv-color-line-glow: rgba(245,247,255,.12);

  /* Overlay / foco / estados neutros */
  --sfv-color-overlay: rgba(11,12,16,.74);
  --sfv-color-focus-ring: rgba(245,247,255,.20);
  --sfv-color-hover: rgba(255,255,255,.06);
  --sfv-color-active: rgba(255,255,255,.10);

  /* Campos */
  --sfv-color-field-bg: rgba(255,255,255,.04);
  --sfv-color-field-bg-2: rgba(255,255,255,.06);
  --sfv-color-field-border: rgba(255,255,255,.12);
  --sfv-color-field-border-strong: rgba(255,255,255,.18);
  --sfv-color-placeholder: rgba(245,247,255,.46);

  /* Scroll */
  --sfv-color-scrollbar: rgba(255,255,255,.12);
  --sfv-color-scrollbar-hover: rgba(255,255,255,.18);

  /* Semânticos */
  --sfv-color-brand: #ffffff;
  /* ✅ Correção de contraste: brand branco precisa de texto escuro */
  --sfv-color-on-brand: #0b0c10;

  /* ✅ Padrão antigo (skinável) para botões de ação */
  --sfv-color-danger: #f04b4b;
  --sfv-color-on-danger: #ffffff;

  --sfv-color-success: #23c483;
  --sfv-color-on-success: #ffffff;

  --sfv-color-info: #0250f8;
  --sfv-color-on-info: #ffffff;

  --sfv-color-warning: #f79e04;
  --sfv-color-on-warning: #ffffff;

  --sfv-color-open: #21c700;
  --sfv-color-on-open: #ffffff;

  --sfv-color-closed: #c70700;
  --sfv-color-on-closed: #ffffff;

  /* ======================================================
     MEDIDAS / SOMBRAS / AUXILIARES
     ====================================================== */

  --sfv-line-w: 1px;
  --sfv-divider-w: 1px;
  --sfv-divider-strong-w: 1px;

  --sfv-shadow-sm: 0 8px 24px rgba(0,0,0,.35);
  --sfv-shadow-md: 0 14px 38px rgba(0,0,0,.45);
  --sfv-shadow-lg: 0 22px 60px rgba(0,0,0,.55);

  /* ======================================================
     TOKENS CONTEXTUAIS » CARD
     ====================================================== */

  --sfv-card-bg: var(--sfv-color-surface-2);
  --sfv-card-fg: var(--sfv-color-text);
  --sfv-card-border: var(--sfv-color-border);
  --sfv-card-hover-bg: var(--sfv-color-surface-3);
  --sfv-card-shadow: var(--sfv-shadow-sm);
  --sfv-card-icon: rgba(245,247,255,.72);
  --sfv-card-title: var(--sfv-color-text-strong);
  --sfv-card-muted: var(--sfv-color-text-muted);

  /* ======================================================
     TOKENS CONTEXTUAIS » PANEL
     ====================================================== */

  --sfv-panel-bg: var(--sfv-color-surface-2);
  --sfv-panel-fg: var(--sfv-color-text);
  --sfv-panel-border: var(--sfv-color-border);
  --sfv-panel-shadow: var(--sfv-shadow-sm);
  --sfv-panel-title: var(--sfv-color-text-strong);
  --sfv-panel-text: var(--sfv-color-text);
  --sfv-panel-muted: var(--sfv-color-text-muted);
  --sfv-panel-icon: rgba(245,247,255,.72);
  --sfv-panel-divider: var(--sfv-color-divider);
  --sfv-panel-divider-strong: var(--sfv-color-divider-strong);
  --sfv-panel-avatar-ring: color-mix(in srgb, var(--sfv-color-text-strong) 28%, transparent);
  --sfv-panel-avatar-placeholder: color-mix(in srgb, var(--sfv-color-border) 72%, transparent);

  /* ======================================================
     TOKENS CONTEXTUAIS » PRESTADOR CARD
     ====================================================== */

  --sfv-prest-card-bg: var(--sfv-panel-bg);
  --sfv-prest-card-border: var(--sfv-panel-border);
  --sfv-prest-card-shadow: var(--sfv-panel-shadow);
  --sfv-prest-card-radius: 14px;

  --sfv-prest-card-divider: var(--sfv-panel-divider);
  --sfv-prest-card-divider-strong: var(--sfv-panel-divider-strong);

  --sfv-prest-card-title: var(--sfv-panel-title);
  --sfv-prest-card-text: var(--sfv-panel-text);
  --sfv-prest-card-muted: var(--sfv-panel-muted);
  --sfv-prest-card-number: var(--sfv-panel-title);

  --sfv-prest-card-avatar-ring: var(--sfv-panel-avatar-ring);
  --sfv-prest-card-avatar-shadow:
    0 0 0 1px color-mix(in srgb, var(--sfv-prest-card-border) 78%, transparent),
    0 10px 24px rgba(0,0,0,.25);
  --sfv-prest-card-avatar-placeholder: var(--sfv-panel-avatar-placeholder);

  --sfv-prest-card-accent: var(--sfv-color-brand);
  --sfv-prest-card-selected-border: color-mix(in srgb, var(--sfv-prest-card-accent) 55%, var(--sfv-prest-card-border));
  --sfv-prest-card-selected-shadow:
    0 0 0 2px color-mix(in srgb, var(--sfv-prest-card-accent) 22%, transparent),
    var(--sfv-prest-card-shadow);

  /* ======================================================
     TOKENS CONTEXTUAIS » BADGE
     ====================================================== */

  --sfv-badge-radius: 999px;
  --sfv-badge-border-w: 1px;
  --sfv-badge-shadow: 0 10px 22px rgba(0,0,0,.25);
  --sfv-badge-font-size: 12px;
  --sfv-badge-font-weight: 1000;
  --sfv-badge-padding-y: 4px;
  --sfv-badge-padding-x: 10px;

  --sfv-badge-open-border: color-mix(in srgb, var(--sfv-color-open) 78%, #000);
  --sfv-badge-closed-border: color-mix(in srgb, var(--sfv-color-closed) 78%, #000);

  /* ======================================================
     TOKENS CONTEXTUAIS » NAV
     ====================================================== */

  --sfv-nav-bg: var(--sfv-color-surface);
  --sfv-nav-fg: var(--sfv-color-text);
  --sfv-nav-border: var(--sfv-color-divider);
  --sfv-nav-shadow: var(--sfv-shadow-md);
  --sfv-nav-hover-bg: rgba(255,255,255,.06);
  --sfv-nav-active-bg: rgba(255,255,255,.08);
  --sfv-nav-active-fg: var(--sfv-color-text-strong);

  /* Ícones do menu lateral */
  --sfv-nav-icon-color: rgba(245,247,255,.72);
  --sfv-nav-icon-hover-color: #f5f7ff;
  --sfv-nav-icon-active-color: #ffffff;
  --sfv-nav-icon-size: 18px;

  /* ======================================================
     TOKENS CONTEXTUAIS » RESET
     ====================================================== */

  --sfv-reset-bg: var(--sfv-color-surface-2);
  --sfv-reset-fg: var(--sfv-color-text);
  --sfv-reset-border: var(--sfv-color-border);
  --sfv-reset-shadow: var(--sfv-shadow-sm);
  --sfv-reset-title: var(--sfv-color-text-strong);
  --sfv-reset-muted: var(--sfv-color-text-muted);
  --sfv-reset-icon: rgba(245,247,255,.72);

  /* ======================================================
     TOKENS CONTEXTUAIS » ÍCONES GERAIS
     ====================================================== */

  --sfv-icon-color: var(--sfv-color-text);
  --sfv-icon-muted-color: rgba(245,247,255,.70);
  --sfv-icon-strong-color: #ffffff;
  --sfv-icon-danger-color: var(--sfv-color-danger);
  --sfv-icon-success-color: var(--sfv-color-success);
  --sfv-icon-warning-color: var(--sfv-color-warning);
  --sfv-icon-info-color: var(--sfv-color-info);

  --sfv-icon-size-sm: 14px;
  --sfv-icon-size-md: 18px;
  --sfv-icon-size-lg: 22px;

  /* ======================================================
     TOKENS CONTEXTUAIS » BOTÕES DE AÇÃO DA FILA
     - Consumidos por assets/css/components/sfv-buttons.css
     - Classes reais:
       .sfv-btn--up
       .sfv-btn--down
       .sfv-btn--ok
       .sfv-btn--del
     - Editável por skin:
       bg / fg / border / icon / hover / active
     ====================================================== */

  --sfv-fila-btn-bg: color-mix(in srgb, var(--sfv-color-border) 82%, #ffffff);
  --sfv-fila-btn-fg: var(--sfv-color-text);
  --sfv-fila-btn-border: color-mix(in srgb, var(--sfv-color-border) 55%, transparent);

  --sfv-fila-btn-hover-bg: var(--sfv-fila-btn-bg);
  --sfv-fila-btn-hover-fg: var(--sfv-fila-btn-fg);
  --sfv-fila-btn-hover-border: var(--sfv-fila-btn-border);

  --sfv-fila-btn-active-bg: var(--sfv-fila-btn-bg);
  --sfv-fila-btn-active-fg: var(--sfv-fila-btn-fg);
  --sfv-fila-btn-active-border: var(--sfv-fila-btn-border);

  --sfv-fila-btn-focus-ring: rgba(245,247,255,.32);

  /* UP = mover para cima */
  --sfv-fila-btn-up-bg: #0250f8;
  --sfv-fila-btn-up-fg: #ffffff;
  --sfv-fila-btn-up-icon: #ffffff;
  --sfv-fila-btn-up-border: #0250f8;

  --sfv-fila-btn-up-hover-bg: #0250f8;
  --sfv-fila-btn-up-hover-fg: #ffffff;
  --sfv-fila-btn-up-hover-icon: #ffffff;
  --sfv-fila-btn-up-hover-border: #0250f8;

  --sfv-fila-btn-up-active-bg: #0250f8;
  --sfv-fila-btn-up-active-fg: #ffffff;
  --sfv-fila-btn-up-active-icon: #ffffff;
  --sfv-fila-btn-up-active-border: #0250f8;

  /* DOWN = mover para baixo */
  --sfv-fila-btn-down-bg: #0250f8;
  --sfv-fila-btn-down-fg: #ffffff;
  --sfv-fila-btn-down-icon: #ffffff;
  --sfv-fila-btn-down-border: #0250f8;

  --sfv-fila-btn-down-hover-bg: #0250f8;
  --sfv-fila-btn-down-hover-fg: #ffffff;
  --sfv-fila-btn-down-hover-icon: #ffffff;
  --sfv-fila-btn-down-hover-border: #0250f8;

  --sfv-fila-btn-down-active-bg: #0250f8;
  --sfv-fila-btn-down-active-fg: #ffffff;
  --sfv-fila-btn-down-active-icon: #ffffff;
  --sfv-fila-btn-down-active-border: #0250f8;

  /* OK = marcar como atendido */
  --sfv-fila-btn-ok-bg: #23c483;
  --sfv-fila-btn-ok-fg: #ffffff;
  --sfv-fila-btn-ok-icon: #ffffff;
  --sfv-fila-btn-ok-border: #23c483;

  --sfv-fila-btn-ok-hover-bg: #23c483;
  --sfv-fila-btn-ok-hover-fg: #ffffff;
  --sfv-fila-btn-ok-hover-icon: #ffffff;
  --sfv-fila-btn-ok-hover-border: #23c483;

  --sfv-fila-btn-ok-active-bg: #23c483;
  --sfv-fila-btn-ok-active-fg: #ffffff;
  --sfv-fila-btn-ok-active-icon: #ffffff;
  --sfv-fila-btn-ok-active-border: #23c483;

  /* DEL = excluir cliente */
  --sfv-fila-btn-del-bg: #f04b4b;
  --sfv-fila-btn-del-fg: #ffffff;
  --sfv-fila-btn-del-icon: #ffffff;
  --sfv-fila-btn-del-border: #f04b4b;

  --sfv-fila-btn-del-hover-bg: #f04b4b;
  --sfv-fila-btn-del-hover-fg: #ffffff;
  --sfv-fila-btn-del-hover-icon: #ffffff;
  --sfv-fila-btn-del-hover-border: #f04b4b;

  --sfv-fila-btn-del-active-bg: #f04b4b;
  --sfv-fila-btn-del-active-fg: #ffffff;
  --sfv-fila-btn-del-active-icon: #ffffff;
  --sfv-fila-btn-del-active-border: #f04b4b;

  /* Mantido fora do escopo principal dos botões up/down/ok/del */
  --sfv-btn-time-ok-bg: #f9fc58;
  --sfv-btn-time-ok-fg: #ffffff;
  --sfv-btn-time-ok-border: #f9fc58;
  --sfv-btn-time-ok-hover-bg: #f9fc58;
  --sfv-btn-time-ok-hover-fg: #ffffff;
  --sfv-btn-time-ok-hover-border: #f9fc58;
  --sfv-btn-time-ok-active-bg: #f9fc58;
  --sfv-btn-time-ok-active-fg: #ffffff;
  --sfv-btn-time-ok-active-border: #f9fc58;
}

@media (max-width: 560px){
  #sfv-prestador-app,
  #sfv-area-prestador,
  #sfv-area-cliente,
  #sfv-fila-publica,
  .sfv-scope{
    --sfv-color-divider-strong: rgba(245,247,255,.34);
    --sfv-color-line-glow: rgba(245,247,255,.14);

    --sfv-panel-divider-strong: var(--sfv-color-divider-strong);
    --sfv-prest-card-divider-strong: var(--sfv-panel-divider-strong);
  }
}