/* =============================================================
   STYLEMANAGER — COMPONENTES ESPECÍFICOS
   Complementa o design system (custom.css)
   ============================================================= */

/* ── CARDS DE PRODUTO / ESTOQUE ─────────────────────────────── */
.product-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.product-card.estoque-esgotado { border-top: 3px solid var(--danger); }
.product-card.estoque-baixo    { border-top: 3px solid var(--warning); }
.product-card.estoque-ok       { border-top: 3px solid var(--success); }

.product-card-header {
    padding: 16px 18px 10px;
}

.product-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.product-card-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--cor-primaria);
    letter-spacing: -0.5px;
}

.product-card-margin {
    font-size: 11.5px;
    color: var(--success);
    font-weight: 600;
}

.product-card-body {
    padding: 10px 18px 16px;
    border-top: 1px solid var(--border-color);
}

.stock-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.stock-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: var(--transition);
}

.stock-btn:hover { background: var(--surface-3); color: var(--text-primary); }
.stock-btn.add:hover   { background: #ecfdf5; color: var(--success); border-color: var(--success); }
.stock-btn.minus:hover { background: #fef2f2; color: var(--danger);  border-color: var(--danger); }
.stock-btn:disabled    { opacity: 0.35; cursor: not-allowed; }

.stock-quantity {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    min-width: 36px;
    text-align: center;
    line-height: 1;
}

.stock-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--radius-full);
}

/* ── CARDS DE SERVIÇO ────────────────────────────────────────── */
.servico-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.servico-card:hover {
    border-color: var(--cor-secundaria);
    box-shadow: var(--shadow-md);
}

.servico-card.selected {
    border-color: var(--cor-primaria);
    background: linear-gradient(135deg, rgba(var(--cor-primaria-rgb), 0.04), rgba(var(--cor-secundaria-rgb), 0.04));
    box-shadow: 0 0 0 3px rgba(30,41,59,0.12);
}

.servico-card-title  { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.servico-card-desc   { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.servico-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.servico-duracao { font-size: 12.5px; color: var(--text-muted); }
.servico-preco   { font-size: 18px; font-weight: 800; color: var(--cor-primaria); }

/* ── CARDS DE PROFISSIONAL ───────────────────────────────────── */
.profissional-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.profissional-card:hover {
    border-color: var(--cor-secundaria);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.profissional-card.selected {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(30,41,59,0.15);
}

.profissional-avatar-wrap { position: relative; display: inline-block; margin-bottom: 10px; }

.profissional-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cor-secundaria);
}

.profissional-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid white;
    background: var(--success);
}

/* ── TIMELINE DE AGENDAMENTOS ────────────────────────────────── */
.agenda-timeline { display: flex; flex-direction: column; gap: 8px; }

.agenda-slot {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.agenda-slot:hover { border-color: var(--cor-secundaria); box-shadow: var(--shadow-sm); }

.agenda-slot-time {
    font-size: 13px;
    font-weight: 700;
    color: var(--cor-primaria);
    min-width: 44px;
    padding-top: 2px;
}

.agenda-slot-divider {
    width: 2px;
    background: var(--border-color);
    align-self: stretch;
    border-radius: 99px;
    flex-shrink: 0;
}

.agenda-slot-content { flex: 1; }

.agenda-slot-client { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.agenda-slot-service { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ── RATING (ESTRELAS) ───────────────────────────────────────── */
.star-rating, .star-rating-large {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.star-rating input, .star-rating-large input { display: none; }

.star-rating label, .star-rating-large label {
    cursor: pointer;
    padding: 0 2px;
    transition: var(--transition);
}

.star-rating label i, .star-rating-large label i {
    font-size: 1.6rem;
    color: #d1d5db;
}

.star-rating-large label i { font-size: 2rem; }

.star-rating input:checked ~ label i,
.star-rating label:hover ~ label i,
.star-rating label:hover i,
.star-rating-large input:checked ~ label i,
.star-rating-large label:hover ~ label i,
.star-rating-large label:hover i {
    color: #f59e0b;
}

/* ── MODAIS ESPECÍFICOS ──────────────────────────────────────── */
.modal-header.gradient {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
    color: white;
    border-bottom: none;
}

.modal-header.gradient .btn-close { filter: brightness(0) invert(1); }
.modal-header.gradient .modal-title { color: white; }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-state-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.empty-state-text { font-size: 13.5px; }

/* ── SEARCH BAR ──────────────────────────────────────────────── */
.search-bar {
    position: relative;
}

.search-bar .search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}

.search-bar .form-control {
    padding-left: 38px;
}

/* ── PROGRESS WIZARD ─────────────────────────────────────────── */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
}

.wizard-step::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: var(--border-color);
    z-index: 0;
}

.wizard-step:last-child::after { display: none; }

.wizard-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
    transition: var(--transition);
}

.wizard-step.active .wizard-step-dot {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: white;
}

.wizard-step.done .wizard-step-dot {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.wizard-step-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

.wizard-step.active .wizard-step-label { color: var(--cor-primaria); }
.wizard-step.done  .wizard-step-label  { color: var(--success); }

/* ── MOBILE RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 768px) {
    .product-card { margin-bottom: 12px; }
    .stock-controls { flex-wrap: wrap; }
    .servico-card:hover { transform: none; }
    .wizard-step-label { display: none; }
    .wizard-step::after { top: 14px; }

    /* Tabelas: force scroll horizontal */
    .table-responsive-stack td,
    .table-responsive-stack th { display: block; }
}

@media (max-width: 576px) {
    .product-card-price { font-size: 18px; }
    .kpi-value { font-size: 20px; }
}