/**
 * =========================================
 * App.css - Internal Pages Styling
 * Modern Rose Theme for Dating App
 * =========================================
 */

/* ===========================================
   CSS VARIABLES FOR INTERNAL PAGES
   =========================================== */
:root {
    --app-rose: #E11D48;
    --app-rose-hover: #BE123C;
    --app-rose-light: #FFF1F2;
    --app-rose-muted: #FDA4AF;
    --app-charcoal: #18181B;
    --app-grey-900: #27272A;
    --app-grey-600: #52525B;
    --app-grey-400: #A1A1AA;
    --app-grey-200: #E4E4E7;
    --app-grey-100: #F4F4F5;
    --app-white: #FFFFFF;
    --app-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --app-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --app-radius: 12px;
    --app-radius-sm: 8px;
    --app-transition: all 0.2s ease;
}

/* ===========================================
   SIDEBAR NAVIGATION
   =========================================== */

/* Sidebar active state with rose accent */
.side-menu .collection-item.active,
.side-menu li.active,
.sidenav li.active,
nav .nav-wrapper .side-menu-col .collection .collection-item.active,
.collection .collection-item.active {
    background: var(--app-rose-light) !important;
    border-left: 3px solid var(--app-rose) !important;
    color: var(--app-rose) !important;
}

.side-menu .collection-item.active a,
.side-menu li.active a,
.sidenav li.active a {
    color: var(--app-rose) !important;
    font-weight: 600 !important;
}

/* Sidebar hover */
.side-menu .collection-item:hover,
.collection .collection-item:hover {
    background: var(--app-grey-100) !important;
}

/* Sidebar icons */
.side-menu .collection-item i,
.sidenav li i {
    color: var(--app-grey-600) !important;
    margin-right: 12px !important;
}

.side-menu .collection-item.active i,
.sidenav li.active i {
    color: var(--app-rose) !important;
}

/* Message counter badge */
.messages-counter,
.messages_counter,
.badge-count,
.notification-badge {
    background: var(--app-rose) !important;
    color: var(--app-white) !important;
    border-radius: 12px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* ===========================================
   CARDS & CONTENT AREAS
   =========================================== */

.card,
.card-panel,
.content-card,
.standard-page-content,
.profile-content,
.settings-content {
    background: var(--app-white) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow) !important;
    border: 1px solid var(--app-grey-200) !important;
}

.card-title,
.card-header h5,
.card-header h4 {
    color: var(--app-charcoal) !important;
    font-weight: 600 !important;
}

.card-subtitle {
    color: var(--app-rose) !important;
}

/* ===========================================
   BUTTONS - ROSE THEME
   =========================================== */

/* Primary buttons */
.btn,
.button.primary,
.button.blue,
.primary_btn,
.primary-btn,
button.blue,
button.primary,
input[type="submit"].primary,
input[type="submit"].blue,
.btn-primary {
    background: var(--app-rose) !important;
    color: var(--app-white) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: var(--app-transition) !important;
    box-shadow: none !important;
    text-transform: none !important;
}

.btn:hover,
.button.primary:hover,
.button.blue:hover,
.primary_btn:hover,
.primary-btn:hover,
button.blue:hover,
button.primary:hover,
input[type="submit"].primary:hover,
input[type="submit"].blue:hover,
.btn-primary:hover {
    background: var(--app-rose-hover) !important;
    transform: translateY(-1px) !important;
}

/* Secondary/Ghost buttons */
.button.secondary,
.button.white,
.button.flat,
button.secondary,
button.white,
button.flat,
.btn-secondary,
.btn-outline {
    background: var(--app-white) !important;
    color: var(--app-charcoal) !important;
    border: 1px solid var(--app-grey-200) !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    transition: var(--app-transition) !important;
}

.button.secondary:hover,
.button.white:hover,
.button.flat:hover,
button.secondary:hover,
button.white:hover,
button.flat:hover,
.btn-secondary:hover,
.btn-outline:hover {
    background: var(--app-grey-100) !important;
    border-color: var(--app-grey-400) !important;
}

/* Small action buttons */
.btn-floating,
.btn-fab {
    background: var(--app-rose) !important;
}

.btn-floating:hover,
.btn-fab:hover {
    background: var(--app-rose-hover) !important;
}

/* ===========================================
   FORM INPUTS
   =========================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    border: 1px solid var(--app-grey-200) !important;
    border-radius: var(--app-radius-sm) !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    background: var(--app-white) !important;
    transition: var(--app-transition) !important;
    box-shadow: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--app-rose) !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1) !important;
    outline: none !important;
}

/* Validation error state */
input.invalid,
input.error,
select.invalid,
select.error,
textarea.invalid,
textarea.error,
.field-error input,
.field-error select {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Error message styling */
.validation-error,
.error-message,
.field-error-message {
    color: #DC2626 !important;
    font-size: 13px !important;
    margin-top: 4px !important;
    display: block !important;
}

/* Enhanced alert styling */
.alert.alert-danger {
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    color: #991B1B !important;
    border-radius: var(--app-radius-sm) !important;
    padding: 16px !important;
}

.alert.alert-danger .title {
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* ===========================================
   PROFILE PAGE
   =========================================== */

/* Profile header with rose gradient */
.card-profile .profile-card-header,
.card-profile .profile-card-header .card-header-bg,
.card-profile .profile-card-header .card-header-bg div,
.profile-cover,
.profile-header-bg {
    background: linear-gradient(135deg, var(--app-rose) 0%, #F43F5E 50%, #FB7185 100%) !important;
}

.card-profile .profile-header-info h3,
.profile-name {
    color: var(--app-white) !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Profile photo */
.card-profile .profile-header-photo img,
.profile-avatar img {
    border: 4px solid var(--app-white) !important;
    box-shadow: var(--app-shadow) !important;
}

/* ===========================================
   TABS & NAVIGATION
   =========================================== */

.tabs .tab a.active,
.nav-tabs .nav-link.active,
.tab-link.active {
    color: var(--app-rose) !important;
    border-bottom: 2px solid var(--app-rose) !important;
}

.tabs .tab a:hover,
.nav-tabs .nav-link:hover {
    color: var(--app-rose) !important;
}

.tabs .indicator {
    background: var(--app-rose) !important;
}

/* ===========================================
   HOT OR NOT GAME
   =========================================== */

.hotgame-card,
.swipe-card {
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow) !important;
    overflow: hidden !important;
}

.hotgame-like-btn,
.swipe-like {
    background: var(--app-rose) !important;
    border-radius: 50% !important;
}

.hotgame-dislike-btn,
.swipe-dislike {
    background: var(--app-grey-400) !important;
    border-radius: 50% !important;
}

/* ===========================================
   GALLERY & MEDIA
   =========================================== */

.gallery-item,
.media-item,
.photo-item {
    border-radius: var(--app-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--app-shadow-sm) !important;
    transition: var(--app-transition) !important;
}

.gallery-item:hover,
.media-item:hover,
.photo-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--app-shadow) !important;
}

/* ===========================================
   SETTINGS PAGE
   =========================================== */

.settings-section,
.settings-group {
    background: var(--app-white) !important;
    border-radius: var(--app-radius) !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    box-shadow: var(--app-shadow-sm) !important;
}

.settings-section h5,
.settings-group h5 {
    color: var(--app-charcoal) !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
}

/* Switch/Toggle styling */
.switch label input[type="checkbox"]:checked+.lever {
    background-color: var(--app-rose-muted) !important;
}

.switch label input[type="checkbox"]:checked+.lever:after {
    background-color: var(--app-rose) !important;
}

/* ===========================================
   MODALS & DIALOGS
   =========================================== */

.modal,
.modal-content {
    border-radius: var(--app-radius) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

.modal-header {
    border-bottom: 1px solid var(--app-grey-200) !important;
}

.modal-footer {
    border-top: 1px solid var(--app-grey-200) !important;
}

/* ===========================================
   LINKS
   =========================================== */

a {
    color: var(--app-rose) !important;
    transition: var(--app-transition) !important;
}

a:hover {
    color: var(--app-rose-hover) !important;
}

/* Preserve white links in dark areas */
.profile-card-header a,
footer a {
    color: var(--app-white) !important;
}

/* ===========================================
   UTILITY - HIDE LEGACY BLUE GLOWS
   =========================================== */

*:focus {
    outline: none !important;
}

/* Remove any lingering blue borders/shadows */
.wrap-login100,
.container-login100 {
    box-shadow: none !important;
}