/* Glass Theme - Updated with modern color palette and typography */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* Primary Color Palette */
  --primary: #895200;
  --primary-container: #e9a14e;
  --primary-fixed: #ffdcbc;
  --primary-fixed-dim: #ffb86a;
  --on-primary: #ffffff;
  --on-primary-container: #623900;
  --on-primary-fixed: #2c1700;
  --on-primary-fixed-variant: #683d00;
  --inverse-primary: #ffb86a;
  
  /* Secondary Color Palette */
  --secondary: #775837;
  --secondary-container: #fdd2a9;
  --secondary-fixed: #ffdcbc;
  --secondary-fixed-dim: #e8bf96;
  --on-secondary: #ffffff;
  --on-secondary-container: #785938;
  --on-secondary-fixed: #2c1700;
  --on-secondary-fixed-variant: #5d4122;
  
  /* Tertiary Color Palette */
  --tertiary: #006689;
  --tertiary-container: #65bae6;
  --tertiary-fixed: #c3e8ff;
  --tertiary-fixed-dim: #7cd0fd;
  --on-tertiary: #ffffff;
  --on-tertiary-container: #004963;
  --on-tertiary-fixed: #001e2c;
  --on-tertiary-fixed-variant: #004c68;
  
  /* Surface Colors */
  --background: #faf9f6;
  --surface: #faf9f6;
  --surface-dim: #dbdad7;
  --surface-bright: #faf9f6;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f3f1;
  --surface-container: #efeeeb;
  --surface-container-high: #e9e8e5;
  --surface-container-highest: #e3e2e0;
  --surface-variant: #e3e2e0;
  
  /* Text Colors */
  --on-background: #1a1c1a;
  --on-surface: #1a1c1a;
  --on-surface-variant: #524437;
  --outline: #847466;
  --outline-variant: #d7c3b2;
  
  /* Inverse Colors */
  --inverse-surface: #2f312f;
  --inverse-on-surface: #f2f1ee;
  
  /* Surface Tint */
  --surface-tint: #895200;
  
  /* Error Colors */
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error: #ffffff;
  --on-error-container: #93000a;
  
  /* Legacy Variables for Compatibility */
  --gold: var(--primary);
  --gold-dark: var(--primary);
  --gold-light: var(--primary-container);
  --gold-pale: var(--background);
  --cream: var(--surface);
  --ink: var(--on-surface);
  --ink-muted: var(--on-surface-variant);
  --ink-faint: var(--outline);
  --border: var(--outline-variant);
  --danger: var(--error);
  --success: #52A374;

  --pf-page-bg: radial-gradient(1200px 700px at 20% 10%, rgba(78, 136, 184, 0.35) 0%, rgba(78, 136, 184, 0) 60%),
                radial-gradient(900px 650px at 85% 25%, rgba(138, 180, 216, 0.35) 0%, rgba(138, 180, 216, 0) 62%),
                linear-gradient(135deg, #f3f8fe 0%, #deecfa 40%, #c8ddf4 75%, #b8d2ee 100%);
  --pf-surface-card: rgba(255, 255, 255, 0.28);
  --pf-surface-control: rgba(255, 255, 255, 0.45);
  --pf-surface-hover: rgba(255, 255, 255, 0.22);
  --pf-border-color: rgba(255, 255, 255, 0.45);
  --pf-glass-blur: 14px;
  --pf-shadow-elev-1: 0 18px 60px rgba(30, 60, 100, 0.18);
}

body {
  background: beige;
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Glassmorphism Effects */
.glass-card {
  background-color: var(--pf-surface-card);
  border: 1px solid var(--pf-border-color);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    -webkit-backdrop-filter: blur(var(--pf-glass-blur));
    backdrop-filter: blur(var(--pf-glass-blur));
  }
}

/* Utility Classes */
.lowercase-all {
  text-transform: lowercase;
}

.numerical-grey {
  color: #525252;
}

.bank-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: white;
  padding: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Theme-specific overrides for existing classes */
.pf-card {
  background-color: var(--pf-surface-card);
  border: 1px solid var(--pf-border-color);
  box-shadow: var(--pf-shadow-elev-1);
}

.pf-header {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.pf-bottom-nav {
  background-color: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0px -18px 50px rgba(30, 60, 100, 0.12);
}

.pf-dashboard-filter-pills {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.pf-pill {
  background: var(--pf-surface-control);
  border-color: var(--pf-border-color);
  -webkit-backdrop-filter: blur(var(--pf-glass-blur));
  backdrop-filter: blur(var(--pf-glass-blur));
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pf-card,
  .pf-header,
  .pf-bottom-nav {
    -webkit-backdrop-filter: blur(var(--pf-glass-blur));
    backdrop-filter: blur(var(--pf-glass-blur));
  }

  .pf-dashboard-filter-pills {
    -webkit-backdrop-filter: blur(var(--pf-glass-blur));
    backdrop-filter: blur(var(--pf-glass-blur));
  }
}

.pf-nav {
  background: #E8E2D6;
}

.pf-nav-link,
.pf-nav-user,
.pf-nav-user a,
.pf-user-trigger,
.pf-nav-icon-link {
  color: #6B6760;
}

.pf-nav-link:hover,
.pf-nav-user a:hover,
.pf-user-trigger:hover,
.pf-nav-icon-link:hover {
  color: #1a1c1a;
}

.pf-nav-link:hover,
.pf-user-trigger:hover,
.pf-nav-icon-link:hover {
  background: rgba(0,0,0,0.04);
}

/* Button styling with new colors */
.pf-btn-primary {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
  border: none;
}

.pf-btn-secondary {
  background-color: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
}

/* Form styling */
.pf-input {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
}

.pf-input:focus {
  border-color: var(--primary-container);
  box-shadow: 0 0 0 3px rgba(233, 161, 78, 0.1);
}

/* Flash messages */
.pf-flash-error {
  background-color: var(--error-container);
  color: var(--on-error-container);
  border-left: 4px solid var(--error);
}

.pf-flash-success {
  background-color: #d4edda;
  color: #155724;
  border-left: 4px solid var(--success);
}