/* =================================================================
    MD3 Account Profile Page Styles
    Overrides for resources/views/account/profile.blade.php
    ================================================================= */
 
 /* Scope everything to the profile page wrapper */
 .main-wrapper form[action*="account.profile.update"] {
     --profile-card-bg: var(--md-sys-color-surface-container-low);
    --profile-input-bg: #ffffff;
     display: flex;
     flex-direction: column;
     gap: 24px;
 }
 
 /* Success Alert (Sibling to form, but let's target generic alert in this context) */
 .main-wrapper .bg-emerald-50.border-emerald-200 {
     background-color: var(--md-sys-color-success-container) !important;
     color: var(--md-sys-color-on-success-container) !important;
     border: none !important;
     border-radius: var(--md3-shape-medium) !important;
     box-shadow: var(--md3-elevation-level1);
 }
 .main-wrapper .bg-emerald-50.border-emerald-200 .material-symbols-outlined {
     color: var(--md-sys-color-on-success-container) !important;
 }
 
 /* CARDS */
 .main-wrapper form[action*="account.profile.update"] .bg-white.rounded-xl.shadow-sm {
     background-color: var(--profile-card-bg) !important;
     border-radius: var(--md3-shape-large) !important;
     border: none !important; /* MD3 cards usually don't have border if elevated, or use outline-variant */
     box-shadow: var(--md3-elevation-level1) !important;
     padding: 24px !important;
     margin-bottom: 0 !important; /* Reset generic margins if any */
 }
 
 /* Card Header Icon */
 .main-wrapper form[action*="account.profile.update"] .bg-blue-100 {
     background-color: var(--md-sys-color-secondary-container) !important;
     border-radius: var(--md3-shape-full) !important; /* Circular icon bg */
 }
 .main-wrapper form[action*="account.profile.update"] .bg-blue-100 .text-blue-600 {
     color: var(--md-sys-color-on-secondary-container) !important;
 }
 
 /* Card Titles */
 .main-wrapper form[action*="account.profile.update"] h2.text-xl {
     color: var(--md-sys-color-on-surface) !important;
     font-family: 'Google Sans Flex', sans-serif;
     font-weight: 500 !important;
     letter-spacing: 0;
 }
 
 /* AVATAR SECTION */
 .main-wrapper form[action*="account.profile.update"] .w-24.h-24.rounded-full {
     background-color: var(--md-sys-color-surface-container-highest) !important;
     border: 2px solid var(--md-sys-color-surface) !important;
     box-shadow: var(--md3-elevation-level2) !important;
 }
 /* Upload Button (Label acting as button) */
 .main-wrapper form[action*="account.profile.update"] label[for="avatar"].bg-slate-100 {
     background-color: transparent !important;
     border: 1px solid var(--md-sys-color-outline) !important;
     color: var(--md-sys-color-primary) !important;
     border-radius: var(--md3-shape-full) !important;
     font-weight: 500 !important;
     padding: 8px 24px !important;
     transition: all 0.2s ease !important;
 }
 .main-wrapper form[action*="account.profile.update"] label[for="avatar"].bg-slate-100:hover {
     background-color: var(--md-sys-color-primary-container) !important;
     color: var(--md-sys-color-on-primary-container) !important;
     border-color: transparent !important;
 }
 
 /* FORM FIELDS */
 .main-wrapper form[action*="account.profile.update"] label.text-sm.font-medium {
     color: var(--md-sys-color-on-surface-variant) !important;
     margin-left: 4px; /* Align with input text */
 }
 
 /* Text Inputs & Textarea */
 .main-wrapper form[action*="account.profile.update"] input[type="text"],
 .main-wrapper form[action*="account.profile.update"] input[type="email"],
 .main-wrapper form[action*="account.profile.update"] textarea {
     background-color: var(--profile-input-bg) !important;
     border: none !important;
     border-bottom: 1px solid var(--md-sys-color-outline) !important;
     border-radius: 4px 4px 0 0 !important; /* Top rounded only for filled inputs */
     padding: 12px 16px !important;
     color: var(--md-sys-color-on-surface) !important;
     box-shadow: none !important;
     transition: border-color 0.2s, background-color 0.2s !important;
 }
 
 .main-wrapper form[action*="account.profile.update"] input:focus,
 .main-wrapper form[action*="account.profile.update"] textarea:focus {
     border-bottom: 2px solid var(--md-sys-color-primary) !important;
     background-color: var(--md-sys-color-surface-container-high) !important;
     outline: none !important;
 }
 
 /* Error States */
 .main-wrapper form[action*="account.profile.update"] .border-red-500 {
     border-bottom-color: var(--md-sys-color-error) !important;
 }
 .main-wrapper form[action*="account.profile.update"] .text-red-600 {
     color: var(--md-sys-color-error) !important;
 }
 
 /* ACCOUNT INFO GRID ITEMS */
 .main-wrapper form[action*="account.profile.update"] .bg-slate-50.rounded-lg {
     background-color: var(--md-sys-color-surface) !important;
     border: 1px solid var(--md-sys-color-outline-variant) !important;
     border-radius: var(--md3-shape-medium) !important;
 }
 .main-wrapper form[action*="account.profile.update"] .text-slate-600 {
     color: var(--md-sys-color-on-surface-variant) !important;
 }
 .main-wrapper form[action*="account.profile.update"] .text-slate-900 {
     color: var(--md-sys-color-on-surface) !important;
 }
 
 /* Wallet Balance Highlighting */
 .main-wrapper form[action*="account.profile.update"] .text-emerald-600 {
     color: var(--md-sys-color-primary) !important; /* Use primary for brand consistency or keep emerald if it implies money specifically */
 }
 
 /* Status Badge */
 .main-wrapper form[action*="account.profile.update"] .bg-emerald-100 {
     background-color: var(--md-sys-color-success-container) !important;
     color: var(--md-sys-color-on-success-container) !important;
     border-radius: var(--md3-shape-small) !important;
 }
 
 /* ACTION BUTTONS */
 /* Container */
 .main-wrapper form[action*="account.profile.update"] .flex.justify-end {
     padding-top: 16px;
     border-top: 1px solid var(--md-sys-color-outline-variant); /* Optional separator */
     margin-top: 16px;
 }
 
 /* Cancel Button */
 .main-wrapper form[action*="account.profile.update"] a.bg-slate-100 {
     background-color: transparent !important;
     color: var(--md-sys-color-primary) !important;
     border: 1px solid var(--md-sys-color-outline) !important;
     border-radius: var(--md3-shape-full) !important;
     font-weight: 500 !important;
     padding: 10px 24px !important;
 }
 .main-wrapper form[action*="account.profile.update"] a.bg-slate-100:hover {
     background-color: var(--md-sys-color-surface-container-high) !important;
 }
 
 /* Save Button */
 .main-wrapper form[action*="account.profile.update"] button.bg-blue-600 {
     background-color: var(--md-sys-color-primary) !important;
     color: var(--md-sys-color-on-primary) !important;
     border-radius: var(--md3-shape-full) !important;
     box-shadow: var(--md3-elevation-level1) !important;
     font-weight: 500 !important;
     padding: 10px 24px !important;
     letter-spacing: 0.5px;
 }
 .main-wrapper form[action*="account.profile.update"] button.bg-blue-600:hover {
     background-color: var(--md-sys-color-primary) !important; /* Add opacity via pseudo if needed */
     box-shadow: var(--md3-elevation-level2) !important;
     filter: brightness(1.1);
 }
 
 /* Icons alignment */
 .material-symbols-outlined {
     vertical-align: middle;
 }