/* iOS 26 Liquid Glass Theme - High Performance & Refined UI */
:root {
  /* Light Mode */
  --glass-nav-light: rgba(255, 255, 255, 0.6);
  --glass-card-light: rgba(255, 255, 255, 0.92); /* Higher opacity so cards stand out from background */
  
  /* Dark Mode */
  --glass-nav-dark: rgba(30, 30, 35, 0.75);
  --glass-card-dark: rgba(35, 35, 40, 0.95);
  
  /* Borders */
  --glass-border-light: rgba(255, 255, 255, 1);
  --glass-border-dark: rgba(255, 255, 255, 0.08);
  
  /* Shadows - simplified for maximum framerate */
  --glass-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.04);
  --glass-shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.2);
  
  /* Filter only applied to main structural elements to save GPU */
  --glass-filter: blur(12px) saturate(140%);
  
  /* Highlights - simplified */
  --glass-highlight-light: inset 0 1px 0px rgba(255, 255, 255, 1);
  --glass-highlight-dark: inset 0 1px 0px rgba(255, 255, 255, 0.1);
}

[data-theme='dark'] {
  --glass-nav-current: var(--glass-nav-dark);
  --glass-card-current: var(--glass-card-dark);
  --glass-border-current: var(--glass-border-dark);
  --glass-shadow-current: var(--glass-shadow-dark);
  --glass-highlight-current: var(--glass-highlight-dark);
}

[data-theme='light'] {
  --glass-nav-current: var(--glass-nav-light);
  --glass-card-current: var(--glass-card-light);
  --glass-border-current: var(--glass-border-light);
  --glass-shadow-current: var(--glass-shadow-light);
  --glass-highlight-current: var(--glass-highlight-light);
}

/* Beautiful iOS-style pastel gradient for Light Mode */
body {
  /* A smooth, visible gradient that contrasts well with white cards */
  background: linear-gradient(135deg, #e6eeff 0%, #f4f7fa 40%, #fdeff4 100%) !important;
  background-attachment: fixed !important;
}
[data-theme='dark'] body {
  background: #09090b !important; /* Keep dark mode pure dark */
}

/* Main Navbar (Uses Blur) */
.navbar-header, [data-theme='dark'] .navbar-header {
  background: var(--glass-nav-current) !important;
  backdrop-filter: var(--glass-filter) !important;
  -webkit-backdrop-filter: var(--glass-filter) !important;
  border-bottom: 1px solid var(--glass-border-current) !important;
  box-shadow: var(--glass-shadow-current), var(--glass-highlight-current) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Sidebar (Uses Blur) */
.sidebar, [data-theme='dark'] .sidebar {
  background: var(--glass-nav-current) !important;
  backdrop-filter: var(--glass-filter) !important;
  -webkit-backdrop-filter: var(--glass-filter) !important;
  border-right: 1px solid var(--glass-border-current) !important;
  box-shadow: var(--glass-shadow-current), var(--glass-highlight-current) !important;
}

/* Dropdown Menus (Uses Blur - Only present when active) */
.dropdown-menu, [data-theme='dark'] .dropdown-menu {
  background: var(--glass-nav-current) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid var(--glass-border-current) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.15), var(--glass-highlight-current) !important;
  border-radius: 14px !important; /* Authentic Apple context menu shape */
  padding: 8px 0;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform, opacity;
}
.dropdown-menu.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.dropdown-item, [data-theme='dark'] .dropdown-item {
  transition: background 0.15s ease;
  border-radius: 8px;
  margin: 2px 8px;
  width: calc(100% - 16px);
  padding: 8px 16px !important;
}
.dropdown-item:hover, [data-theme='dark'] .dropdown-item:hover {
  background: rgba(128, 128, 128, 0.12) !important;
}
.dropdown-header, [data-theme='dark'] .dropdown-header {
  background: transparent !important;
  border-bottom: 1px solid var(--glass-border-current) !important;
}

/* Control Center Circular Buttons */
.navbar-header button.w-40-px {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid var(--glass-border-current) !important;
  box-shadow: var(--glass-shadow-current), var(--glass-highlight-current) !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease, background 0.2s ease;
}
[data-theme='dark'] .navbar-header button.w-40-px {
  background: rgba(40, 40, 45, 0.8) !important;
}
.navbar-header button.w-40-px:hover {
  transform: scale(1.05);
  background: rgba(128, 128, 128, 0.1) !important;
}

/* Specific fix for Exchange Rate Pill */
.navbar-header a[href="exchange-rates.php"] {
  background: var(--glass-card-current) !important;
  border: 1px solid var(--glass-border-current) !important;
  box-shadow: var(--glass-shadow-current), var(--glass-highlight-current) !important;
  border-radius: 12px !important; /* Proper iOS button shape, not an ugly ellipse */
  padding: 8px 16px !important;
}

/* 
=====================================================
Cards (Dashboard widgets & Form containers)
=====================================================
Higher opacity, NO blur for maximum speed.
This ensures cards distinctly float above the body gradient.
*/
.card, .card-header, [data-theme='dark'] .card, [data-theme='dark'] .card-header {
  background: var(--glass-card-current) !important;
  border: 1px solid var(--glass-border-current) !important;
  box-shadow: var(--glass-shadow-current), var(--glass-highlight-current) !important;
  border-radius: 20px !important;
  transition: transform 0.2s ease;
}
.card-header, [data-theme='dark'] .card-header {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 1px solid var(--glass-border-current) !important;
}
.card:hover {
  transform: translateY(-2px);
}

/* 
=====================================================
Colorful iOS Widget Cards (Dashboard Stats)
=====================================================
*/
.card.bg-gradient-start-1, [data-theme='dark'] .card.bg-gradient-start-1 {
  background: linear-gradient(135deg, #007aff 0%, #005bb5 100%) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0, 122, 255, 0.3) !important;
}
.card.bg-gradient-start-2, [data-theme='dark'] .card.bg-gradient-start-2 {
  background: linear-gradient(135deg, #5856d6 0%, #4b48b6 100%) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(88, 86, 214, 0.3) !important;
}
.card.bg-gradient-start-3, [data-theme='dark'] .card.bg-gradient-start-3 {
  background: linear-gradient(135deg, #ff9500 0%, #e08e0b 100%) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(255, 149, 0, 0.3) !important;
}
.card.bg-gradient-start-4, [data-theme='dark'] .card.bg-gradient-start-4 {
  background: linear-gradient(135deg, #34c759 0%, #28a745 100%) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(52, 199, 89, 0.3) !important;
}
.card.bg-gradient-start-5, [data-theme='dark'] .card.bg-gradient-start-5 {
  background: linear-gradient(135deg, #ff3b30 0%, #d32f2f 100%) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(255, 59, 48, 0.3) !important;
}

/* Ensure text inside colorful widgets is pure white */
.card[class*="bg-gradient-start"] p,
.card[class*="bg-gradient-start"] h6,
.card[class*="bg-gradient-start"] span,
[data-theme='dark'] .card[class*="bg-gradient-start"] p,
[data-theme='dark'] .card[class*="bg-gradient-start"] h6,
[data-theme='dark'] .card[class*="bg-gradient-start"] span {
  color: #ffffff !important;
}

/* iOS rounded transparent icon container */
.card[class*="bg-gradient-start"] .w-50-px, [data-theme='dark'] .card[class*="bg-gradient-start"] .w-50-px {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.card[class*="bg-gradient-start"] iconify-icon, [data-theme='dark'] .card[class*="bg-gradient-start"] iconify-icon {
  color: #ffffff !important;
}

/* Input fields - Solid inside cards so they are visible */
.navbar-search input, .form-select, .form-control,
[data-theme='dark'] .navbar-search input, [data-theme='dark'] .form-select, [data-theme='dark'] .form-control {
  background: var(--glass-card-current) !important;
  border: 1px solid rgba(128, 128, 128, 0.2) !important;
  color: inherit !important;
  border-radius: 12px !important;
  transition: border-color 0.2s ease;
}
.navbar-search input:focus, .form-select:focus, .form-control:focus {
  border-color: rgba(64,156,255,0.8) !important;
  box-shadow: 0 0 0 3px rgba(64,156,255,0.2) !important;
}

/* Table styling - Fix default blue backgrounds */
.table, .table > :not(caption) > * > *, [data-theme='dark'] .table, [data-theme='dark'] .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
.table thead th, [data-theme='dark'] .table thead th {
  background-color: rgba(128, 128, 128, 0.08) !important;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2) !important;
  color: inherit !important;
}
.table tbody tr, [data-theme='dark'] .table tbody tr {
  background-color: transparent !important;
  transition: background-color 0.2s ease;
}
.table tbody tr:nth-of-type(odd), [data-theme='dark'] .table tbody tr:nth-of-type(odd) {
  background-color: rgba(128, 128, 128, 0.02) !important;
}
.table tbody tr:hover, [data-theme='dark'] .table tbody tr:hover {
  background-color: rgba(128, 128, 128, 0.1) !important;
}
.table tbody td, [data-theme='dark'] .table tbody td {
  border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important;
  color: inherit !important;
  background-color: transparent !important;
}
[data-theme='dark'] .table-responsive {
  color: #f2f2f7 !important;
}

/* Notification List internal items */
#notificationList li, [data-theme='dark'] #notificationList li {
  border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important;
}
#notificationList li:last-child {
  border-bottom: none !important;
}

/* 
=====================================================
iOS 26 Colorful Sidebar Icons (Settings App Style)
=====================================================
*/
.sidebar-menu > li > a .menu-icon {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important; /* iOS squircle */
  color: #ffffff !important;
  font-size: 18px !important;
  margin-right: 12px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  flex-shrink: 0; /* Prevent icons from squishing */
}

/* Fix for collapsed sidebar (small sidebar) */
.sidebar.active .sidebar-menu > li > a .menu-icon {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Specific iOS Gradients for each menu item using Ionicons */
.sidebar-menu > li > a iconify-icon[icon*="home"] { background: linear-gradient(135deg, #007aff, #005bb5) !important; } /* Blue */
.sidebar-menu > li > a iconify-icon[icon*="people"] { background: linear-gradient(135deg, #34c759, #28a745) !important; } /* Green */
.sidebar-menu > li > a iconify-icon[icon*="person"] { background: linear-gradient(135deg, #ff9500, #e08e0b) !important; } /* Orange */
.sidebar-menu > li > a iconify-icon[icon*="briefcase"] { background: linear-gradient(135deg, #5856d6, #4b48b6) !important; } /* Purple */
.sidebar-menu > li > a iconify-icon[icon*="cube"] { background: linear-gradient(135deg, #ff2d55, #d62046) !important; } /* Pink */
.sidebar-menu > li > a iconify-icon[icon*="phone"] { background: linear-gradient(135deg, #8e8e93, #636366) !important; } /* Slate */
.sidebar-menu > li > a iconify-icon[icon*="warning"] { background: linear-gradient(135deg, #ff3b30, #d32f2f) !important; } /* Red */
.sidebar-menu > li > a iconify-icon[icon*="swap"] { background: linear-gradient(135deg, #5ac8fa, #4ab3e3) !important; } /* Light Blue */
.sidebar-menu > li > a iconify-icon[icon*="pie-chart"] { background: linear-gradient(135deg, #ffcc00, #e6b800) !important; } /* Yellow */
.sidebar-menu > li > a iconify-icon[icon*="cash"] { background: linear-gradient(135deg, #30b0c7, #248a9c) !important; } /* Teal */

/* Fix text and icon colors in dark mode */
[data-theme='dark'] .text-dark,
[data-theme='dark'] .fw-bold,
[data-theme='dark'] .fw-medium,
[data-theme='dark'] .text-secondary-light,
[data-theme='dark'] .text-primary-light,
[data-theme='dark'] h1, [data-theme='dark'] h2, [data-theme='dark'] h3, 
[data-theme='dark'] h4, [data-theme='dark'] h5, [data-theme='dark'] h6, 
[data-theme='dark'] p, [data-theme='dark'] span {
  color: #f2f2f7 !important;
}
[data-theme='dark'] iconify-icon {
  color: #f2f2f7 !important;
}

/* 
=====================================================
iOS 26 Login Page Styling
=====================================================
*/
.auth {
  background: transparent !important;
}

.auth-right, [data-theme='dark'] .auth-right {
  background: var(--glass-card-current) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-left: 1px solid var(--glass-border-current) !important;
  box-shadow: -10px 0 40px rgba(0,0,0,0.05) !important;
}

[data-theme='dark'] .auth-right {
  box-shadow: -10px 0 40px rgba(0,0,0,0.4) !important;
}

/* Make inputs look like iOS text fields */
.auth-right .form-control, [data-theme='dark'] .auth-right .form-control {
  background: var(--glass-nav-current) !important;
  border: 1px solid rgba(128,128,128,0.2) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}
.auth-right .icon-field .icon {
  z-index: 10;
}

/* Style the sign in button */
.auth-right .btn-primary {
  background: linear-gradient(135deg, #007aff, #005bb5) !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.auth-right .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 122, 255, 0.4) !important;
}

/* Language Switcher Pill on Login */
.login-lang-switcher, [data-theme='dark'] .login-lang-switcher {
  background: var(--glass-card-current) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  border: 1px solid var(--glass-border-current) !important;
  border-radius: 24px !important;
  padding: 4px !important;
  box-shadow: var(--glass-shadow-current) !important;
}
.login-lang-switcher a {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  border-radius: 20px !important;
  transition: all 0.2s ease;
}
.login-lang-switcher a.active, .login-lang-switcher a:hover {
  background: linear-gradient(135deg, #007aff, #005bb5) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3) !important;
}

/* 
=====================================================
Layout Background Fixes (Remove old blue tints)
=====================================================
*/
.dashboard-main, [data-theme='dark'] .dashboard-main,
.dashboard-main-body, [data-theme='dark'] .dashboard-main-body,
.d-footer, [data-theme='dark'] .d-footer,
.page-wrapper, [data-theme='dark'] .page-wrapper {
  background-color: transparent !important;
}

[data-theme='dark'] body {
  background-color: #09090b !important;
}

/* 
=====================================================
iOS 26 Liquid Glass Alerts
=====================================================
*/
.alert {
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
[data-theme='dark'] .alert {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Override solid backgrounds to make them translucent (Apple System Colors) */
.alert.bg-warning-600, .alert-warning {
  background: rgba(255, 149, 0, 0.75) !important;
  border-color: rgba(255, 149, 0, 0.4) !important;
}

.alert.bg-danger-600, .alert-danger {
  background: rgba(255, 59, 48, 0.75) !important;
  border-color: rgba(255, 59, 48, 0.4) !important;
}

.alert.bg-success-600, .alert-success {
  background: rgba(52, 199, 89, 0.75) !important;
  border-color: rgba(52, 199, 89, 0.4) !important;
}

.alert.bg-primary-600, .alert-primary, .alert-info {
  background: rgba(0, 122, 255, 0.75) !important;
  border-color: rgba(0, 122, 255, 0.4) !important;
}

.alert .remove-button {
  background: transparent !important;
  border: none !important;
  opacity: 0.8;
  transition: opacity 0.2s;
  color: #ffffff !important;
}
.alert .remove-button:hover {
  opacity: 1;
  transform: scale(1.1);
}