/* Material Design 3 Styles for Satta.Win */

/* Material Icons Configuration */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Bottom Navigation Material Design */
.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px; /* Standard bottom app bar height */
  padding: 0 !important; /* remove any external padding overrides */
  display: flex !important;
  align-items: stretch; /* each item fills full height */
  justify-content: flex-start; /* items will occupy 100% via 20% basis */
  background: var(--md-sys-color-surface-container) !important;
  border-top: 1px solid var(--md-sys-color-outline-variant) !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999 !important;
  overflow: visible; /* ensure shadows/elevation are not clipped */
}

/* Dark mode specific styles */
[data-theme="dark"] .nav-bottom,
html[data-theme="dark"] .nav-bottom {
  background: var(--md-sys-color-surface-container) !important;
  border-top: 1px solid var(--md-sys-color-outline-variant) !important;
  color: var(--md-sys-color-on-surface) !important;
}

.nav-bottom .wave {
  /* five equal parts */
  flex: 0 0 20% !important;
  width: 20% !important;
  height: 100% !important;
  margin: 0 !important; /* full background clickable */
  border-radius: 0; /* no inner rounding to keep full slice clickable */
  transition: background 0.2s ease, transform 0.2s ease;
  padding: 0 !important; /* neutralize any external padding like .tpad */
}

.nav-bottom .wave:hover {
  background: var(--md-sys-color-secondary-container);
}

.nav-bottom .wave a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 6px; /* no vertical padding to allow perfect centering */
  min-height: 0;
  color: #666666 !important;
  text-decoration: none;
  transition: color 0.3s ease;
  line-height: 1.2; /* ensure label is not clipped */
  overflow: visible; /* allow internal elements to render fully */
  gap: 2px; /* consistent space between icon and label */
}

.nav-bottom .wave a:hover {
  color: #007bff !important;
}

/* Dark mode styles for navigation links */
[data-theme="dark"] .nav-bottom .wave a,
html[data-theme="dark"] .nav-bottom .wave a {
  color: #ffffff !important;
}

[data-theme="dark"] .nav-bottom .wave a:hover,
html[data-theme="dark"] .nav-bottom .wave a:hover {
  color: #4fc3f7 !important;
}

.nav-bottom .material-icons,
.nav-bottom .material-symbols-outlined {
  font-family: 'Material Icons', 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  margin-bottom: 0;
  line-height: 24px; /* explicit line-height to prevent vertical clipping */
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: normal !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-wrap: normal !important;
  white-space: nowrap !important;
  direction: ltr !important;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased !important;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility !important;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale !important;
  /* Support for IE. */
  font-feature-settings: 'liga' !important;
  -webkit-font-feature-settings: 'liga' !important;
  -moz-font-feature-settings: 'liga' !important;
}

.nav-bottom .nav-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: 0;
  line-height: 1.2;
}

/* Fallback for Material Icons visibility */
.nav-bottom .material-icons {
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  width: 24px !important;
  height: 24px !important;
}

/* Ensure bottom navigation is visible */
.nav-bottom {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
}

.nav-bottom .wave {
  visibility: visible !important;
  opacity: 1 !important;
}

.nav-bottom .wave a {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Icon fallback system */
.nav-bottom .material-icons {
  display: inline-block;
  color: inherit !important;
}

.nav-bottom .icon-fallback {
  display: none;
  font-size: 20px;
  line-height: 1;
  color: inherit !important;
}

/* Dark mode styles for icons */
[data-theme="dark"] .nav-bottom .material-icons,
html[data-theme="dark"] .nav-bottom .material-icons,
[data-theme="dark"] .nav-bottom .icon-fallback,
html[data-theme="dark"] .nav-bottom .icon-fallback {
  color: #ffffff !important;
}

/* Show fallback when Material Icons fail to load */
@supports not (font-family: 'Material Icons') {
  .nav-bottom .material-icons {
    display: none;
  }
  .nav-bottom .icon-fallback {
    display: inline-block;
  }
}

/* Alternative fallback detection */
.nav-bottom .material-icons:empty + .icon-fallback,
.nav-bottom .material-icons:not(:before) + .icon-fallback {
  display: inline-block;
}

.nav-bottom .material-icons:empty,
.nav-bottom .material-icons:not(:before) {
  display: none;
}

/* Material Design Color System */
:root {
  /* Light Theme Colors */
  --md-sys-color-primary: #3EB489;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #a8f0cc;
  --md-sys-color-on-primary-container: #002114;
  
  --md-sys-color-secondary: #4f6354;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d1e8d5;
  --md-sys-color-on-secondary-container: #0d1f13;
  
  --md-sys-color-surface: #f8fdf9;
  --md-sys-color-on-surface: #191c1a;
  --md-sys-color-surface-variant: #dde5db;
  --md-sys-color-on-surface-variant: #414942;
  --md-sys-color-surface-container: #eef2ee;
  --md-sys-color-surface-container-high: #e8ece8;
  
  --md-sys-color-outline: #717970;
  --md-sys-color-outline-variant: #c1c9be;
  
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
}

/* Dark Theme Colors */
[data-theme="dark"] {
  --md-sys-color-primary: #8dd4b0;
  --md-sys-color-on-primary: #003826;
  --md-sys-color-primary-container: #005138;
  --md-sys-color-on-primary-container: #a8f0cc;
  
  --md-sys-color-secondary: #b5ccb9;
  --md-sys-color-on-secondary: #213528;
  --md-sys-color-secondary-container: #374b3d;
  --md-sys-color-on-secondary-container: #d1e8d5;
  
  --md-sys-color-surface: #101411;
  --md-sys-color-on-surface: #e1e3de;
  --md-sys-color-surface-variant: #414942;
  --md-sys-color-on-surface-variant: #c1c9be;
  --md-sys-color-surface-container: #1d211e;
  --md-sys-color-surface-container-high: #272b27;
  
  --md-sys-color-outline: #8b9389;
  --md-sys-color-outline-variant: #414942;
  
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
}

/* Material Design Cards */
.card {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.24);
  transform: translateY(-2px);
}

.card-header {
  background: var(--md-sys-color-surface-container-high);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 16px 16px 0 0;
  padding: 10px;
}

.card-body {
  color: var(--md-sys-color-on-surface);
}

/* Material Design Buttons */
.btn {
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: none;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.btn-primary:hover {
  background: var(--md-sys-color-primary);
  filter: brightness(1.1);
}

.btn-outline-warning {
  border: 2px solid var(--md-sys-color-primary);
  color: var(--md-sys-color-primary);
  background: transparent;
}

.btn-outline-warning:hover,
.btn-outline-warning.active {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-success {
  background: #28a745;
  color: white;
}

/* Material Design Navigation Pills */
.nav-pills .nav-link {
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  color: var(--md-sys-color-on-surface-variant);
}

.nav-pills .nav-link.active {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
}

.nav-pills .nav-link:hover:not(.active) {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-primary);
}

/* Material Design Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
}

.text-muted {
  color: var(--md-sys-color-on-surface-variant) !important;
}

/* Material Design Form Elements */
.form-label {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
  margin-bottom: 8px;
}

.alert {
  border-radius: 12px;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.alert-info {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.alert-warning {
  background: #fff3cd;
  color: #856404;
}

/* Responsive Design */
@media (max-width: 768px) {
  .nav-bottom .nav-label {
    font-size: 10px;
  }
  
  .nav-bottom .material-icons,
  .nav-bottom .material-symbols-outlined {
    font-size: 20px;
  }
  /* Fit items within 60px bar without overflow */
  .nav-bottom .wave a {
    padding: 0 6px; /* no vertical padding for perfect centering */
    min-height: 0;
  }
}

/* Center deposit inherits default icon styles; no special FAB visuals */

/* Animation Utilities */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Material Design Elevation */
.elevation-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.elevation-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.elevation-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}