/* ============================================================
   Meupetfugiu
   COMPONENTS.CSS
   Componentes reutilizáveis da aplicação
   ============================================================ */


/* ============================================================
   CARD BASE
   ============================================================ */

.app-card {
    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border-light);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);
}


/* ============================================================
   BADGES
   ============================================================ */

.app-badge {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        5px 10px;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 800;
}


.app-badge-success {
    background:
        var(--color-success-light);

    color:
        var(--color-success);
}


.app-badge-danger {
    background:
        var(--color-danger-light);

    color:
        var(--color-danger);
}


.app-badge-warning {
    background:
        var(--color-warning-light);

    color:
        var(--color-warning);
}


/* ============================================================
   BOTÃO DE AÇÃO
   ============================================================ */

.app-button {
    min-height: 44px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        0 18px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-md);

    font-size: 13px;

    font-weight: 800;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.app-button:hover {
    transform:
        translateY(-1px);
}


.app-button-primary {
    background:
        var(--color-accent);

    color:
        var(--color-white);

    box-shadow:
        var(--shadow-accent);
}


.app-button-primary:hover {
    background:
        var(--color-accent-dark);
}


.app-button-secondary {
    background:
        var(--color-primary);

    color:
        var(--color-white);

    box-shadow:
        var(--shadow-primary);
}


.app-button-secondary:hover {
    background:
        var(--color-primary-dark);
}


.app-button-outline {
    background:
        transparent;

    color:
        var(--color-primary);

    border-color:
        var(--color-primary);
}


.app-button-outline:hover {
    background:
        var(--color-primary);

    color:
        var(--color-white);
}


/* ============================================================
   AVATAR
   ============================================================ */

.app-avatar {
    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        var(--color-sand);

    color:
        var(--color-primary);

    font-weight: 800;
}


.app-avatar-sm {
    width: 36px;
    height: 36px;

    font-size: 15px;
}


.app-avatar-md {
    width: 48px;
    height: 48px;

    font-size: 20px;
}


.app-avatar-lg {
    width: 72px;
    height: 72px;

    font-size: 28px;
}


.app-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ============================================================
   DIVISOR
   ============================================================ */

.app-divider {
    width: 100%;
    height: 1px;

    background:
        var(--color-border-light);
}


/* ============================================================
   LOADING
   ============================================================ */

.app-loading {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    color:
        var(--color-text-light);

    font-size: 13px;
}


.app-loading-spinner {
    width: 18px;
    height: 18px;

    border:
        2px solid
        var(--color-border);

    border-top-color:
        var(--color-accent);

    border-radius: 50%;

    animation:
        app-spin .7s linear infinite;
}


@keyframes app-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   TOOLTIP / TEXTO AUXILIAR
   ============================================================ */

.app-helper-text {
    color:
        var(--color-text-muted);

    font-size: 12px;
}


/* ============================================================
   PET PLACEHOLDER
   ============================================================ */

.pet-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            var(--color-sand),
            #F5E5CC
        );

    color:
        var(--color-primary);

    font-size: 55px;
}

/* =========================================================
   TOAST GLOBAL
========================================================= */

.app-toast {

    position: fixed;

    top: 24px;
    right: 24px;

    z-index: 9999;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    width: min(calc(100vw - 32px),
            390px);

    padding: 15px 16px;

    border: 1px solid rgba(59, 36, 24, 0.10);

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 14px 36px rgba(59, 36, 24, 0.16);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-12px) scale(0.98);

    pointer-events: none;

    transition:
        opacity 0.24s ease,
        visibility 0.24s ease,
        transform 0.24s ease;

}


.app-toast.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0) scale(1);

    pointer-events: auto;

}


/* =========================================================
   ÍCONE
========================================================= */

.app-toast-icon {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 10px;

    font-size: 18px;

    font-weight: 800;

    line-height: 1;

}


/* =========================================================
   CONTEÚDO
========================================================= */

.app-toast-content {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;

    flex: 1;

}


.app-toast-title {

    display: block;

    margin: 0;

    color: var(--color-primary);

    font-size: 14px;

    font-weight: 800;

    line-height: 1.3;

}


.app-toast-message {

    display: block;

    margin: 0;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.45;

    word-break: break-word;

}


/* =========================================================
   FECHAR
========================================================= */

.app-toast-close {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    flex-shrink: 0;

    margin-top: -2px;

    padding: 0;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--color-text-muted);

    font-size: 21px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.app-toast-close:hover {

    background:
        rgba(59, 36, 24, 0.07);

    color: var(--color-primary);

}


/* =========================================================
   SUCCESS
========================================================= */

.app-toast.success {

    border-color:
        rgba(46, 125, 50, 0.18);

}


.app-toast.success .app-toast-icon {

    background:
        rgba(46, 125, 50, 0.12);

    color: #2e7d32;

}


/* =========================================================
   WARNING
========================================================= */

.app-toast.warning {

    border-color:
        rgba(198, 129, 0, 0.18);

}


.app-toast.warning .app-toast-icon {

    background:
        rgba(198, 129, 0, 0.12);

    color: #a96d00;

}


/* =========================================================
   ERROR
========================================================= */

.app-toast.error {

    border-color:
        rgba(198, 40, 40, 0.18);

}


.app-toast.error .app-toast-icon {

    background:
        rgba(198, 40, 40, 0.12);

    color: #c62828;

}


/* =========================================================
   INFO
========================================================= */

.app-toast.info {

    border-color:
        rgba(67, 96, 145, 0.18);

}


.app-toast.info .app-toast-icon {

    background:
        rgba(67, 96, 145, 0.12);

    color: #436091;

}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 600px) {

    .app-toast {

        top: 16px;
        right: 16px;
        left: 16px;

        width: auto;

    }

}