/*
 * Sintotermic - Custom Color Palette
 * Based on logo colors: magenta/pink, violet/purple, cyan/turquoise
 * Designed for a feminine, warm app for sympto-thermal fertility tracking
 */

:root {
    /* Brand colors from logo */
    --st-primary: #d6336c;        /* Rose/Magenta - primary action */
    --st-primary-light: #f06595;  /* Lighter rose */
    --st-primary-dark: #a61e4d;   /* Darker rose */
    --st-accent: #7c3aed;         /* Violet/Purple - accents */
    --st-accent-light: #a78bfa;   /* Light violet */
    --st-info: #0ea5e9;           /* Cyan/Turquoise - info */
    --st-info-light: #7dd3fc;     /* Light cyan */
    --st-warm: #f472b6;           /* Warm pink */
    --st-gradient: linear-gradient(135deg, #d6336c 0%, #7c3aed 50%, #0ea5e9 100%);

    /* Override Bootstrap/Metronic primary */
    --bs-primary: #d6336c;
    --bs-primary-rgb: 214, 51, 108;
    --bs-link-color: #d6336c;
    --bs-link-hover-color: #a61e4d;
}

/* Primary button overrides */
.btn-primary {
    background-color: var(--st-primary) !important;
    border-color: var(--st-primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--st-primary-dark) !important;
    border-color: var(--st-primary-dark) !important;
}
.btn-primary:active {
    background-color: var(--st-primary-dark) !important;
    border-color: var(--st-primary-dark) !important;
}

/* Light primary button */
.btn-light-primary {
    color: var(--st-primary) !important;
    background-color: rgba(214, 51, 108, 0.1) !important;
}
.btn-light-primary:hover {
    color: #fff !important;
    background-color: var(--st-primary) !important;
}

/* Badge overrides */
.badge-light-primary {
    color: var(--st-primary) !important;
    background-color: rgba(214, 51, 108, 0.1) !important;
}
.badge-primary {
    background-color: var(--st-primary) !important;
}

/* Text primary */
.text-primary {
    color: var(--st-primary) !important;
}
a.text-primary:hover {
    color: var(--st-primary-dark) !important;
}

/* Background primary */
.bg-primary {
    background-color: var(--st-primary) !important;
}
.bg-light-primary {
    background-color: rgba(214, 51, 108, 0.1) !important;
}

/* Sidebar background - rosa suave */
.app-sidebar {
    background-color: #fce4f0 !important;
    border-right: 1px solid #f9d0e3 !important;
}
.app-sidebar .app-sidebar-logo {
    border-bottom: 1px solid #f9d0e3;
}

/* Sidebar menu items */
.app-sidebar .menu-item .menu-link {
    border-radius: 0.625rem !important;
    margin: 2px 0;
    transition: all 0.2s ease;
}
.app-sidebar .menu-item .menu-link .menu-title {
    color: #6b4c5e !important;
}
.app-sidebar .menu-item .menu-link .menu-icon i {
    color: #9c7a8e !important;
}
.app-sidebar .menu-item .menu-link:hover {
    background-color: #f9d0e3 !important;
}
.app-sidebar .menu-item .menu-link:hover .menu-title {
    color: var(--st-primary) !important;
}
.app-sidebar .menu-item .menu-link:hover .menu-icon i {
    color: var(--st-primary) !important;
}

/* Sidebar active state - button style */
.app-sidebar .menu-item .menu-link.active {
    background: linear-gradient(135deg, var(--st-primary) 0%, var(--st-accent) 100%) !important;
    box-shadow: 0 4px 12px rgba(214, 51, 108, 0.3) !important;
    padding: 10px 15px !important;
}
.app-sidebar .menu-item .menu-link.active .menu-title {
    color: #fff !important;
    font-weight: 600 !important;
}
.app-sidebar .menu-item .menu-link.active .menu-icon i {
    color: #fff !important;
}

/* Sidebar separator */
.app-sidebar .separator-dashed {
    border-color: #f0b8d0 !important;
}

/* Sidebar toggle button */
.app-sidebar-toggle {
    background-color: #fce4f0 !important;
    border: 1px solid #f9d0e3 !important;
}

/* Form focus states */
.form-control:focus, .form-select:focus {
    border-color: var(--st-primary-light) !important;
    box-shadow: 0 0 0 0.25rem rgba(214, 51, 108, 0.15) !important;
}

/* Checkbox/radio */
.form-check-input:checked {
    background-color: var(--st-primary) !important;
    border-color: var(--st-primary) !important;
}

/* Page loading bar */
[data-kt-app-page-loading] {
    background-color: var(--st-primary) !important;
}

/* Livewire navigate progress bar */
[x-ref="progressBarContainer"] > div {
    background-color: var(--st-primary) !important;
}

/* Scrollbar styling (webkit) */
::-webkit-scrollbar-thumb {
    background-color: rgba(214, 51, 108, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(214, 51, 108, 0.5);
}

/* Card hover effect for mobile */
@media (max-width: 768px) {
    .card {
        border-radius: 0.75rem;
    }
}

/* Pagination active */
.page-item.active .page-link {
    background-color: var(--st-primary) !important;
    border-color: var(--st-primary) !important;
}
.page-link {
    color: var(--st-primary) !important;
}
.page-link:hover {
    color: var(--st-primary-dark) !important;
}

/* Table row hover */
.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: rgba(214, 51, 108, 0.04);
}

/* Nav tabs active */
.nav-tabs .nav-link.active {
    color: var(--st-primary) !important;
    border-bottom-color: var(--st-primary) !important;
}

/* Symbol/avatar with brand color */
.symbol .symbol-label.bg-primary {
    background-color: var(--st-primary) !important;
}