/**
 * IIFIN — Desktop Subnav (2 rows, pills) + Bottom Nav
 * Общие компоненты навигации для /personal-finance/, /fincalculator/, /investments/, /assistant/
 */

/* ========= Desktop Subnav (двухрядные пилюли) ========= */
:root { --subnav-maxw: 1360px; }

.iifin-desktop-subnav{
  position: sticky;
  top: 0;
  z-index: 900;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.iifin-desktop-subnav .subnav-row{
  width: 100%;
  max-width: var(--subnav-maxw);
  margin: 10px auto 0;
  padding: 6px 10px;
  box-sizing: border-box;
  background: rgba(241,237,231,.96);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.iifin-desktop-subnav .subnav-row--pf{
  margin-top: 8px;
  margin-bottom: 20px;
}

.iifin-desktop-subnav .subnav-group{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.iifin-desktop-subnav .subnav-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--iifin-muted, #6b7280);
  transition: background .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}

.iifin-desktop-subnav .subnav-link .material-symbols-outlined{
  font-size: 18px;
  line-height: 1;
}

.iifin-desktop-subnav .subnav-link:hover{
  background: rgba(255,255,255,.9);
  color: var(--iifin-primary-600, #0B7E95);
  border-color: rgba(0,0,0,.04);
  transform: translateY(-1px);
}

.iifin-desktop-subnav .subnav-link.is-active{
  background: var(--iifin-primary, #24A8A6);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(36,168,166,.35);
}

.iifin-desktop-subnav .subnav-link.is-active .material-symbols-outlined{
  font-variation-settings: 'FILL' 1;
}

@media (max-width: 1023px){
  .iifin-desktop-subnav{ display:none !important; }
  /* Секция с subnav не занимает место на мобильной — убираем зазор между хедером и контентом (investments и др.) */
  .elementor-section:has(.iifin-desktop-subnav) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }
}

/* ========= Bottom Tab Bar (мобильная панель) — full-width, edge-to-edge ========= */
:root{
  --dock-h: 80px;
  --dock-radius: 0;
  --dock-shadow: 0 -4px 12px rgba(11, 45, 74, 0.08);
}

.app-bottom-nav--global,
.app-bottom-nav.iifin-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 0;
  min-height: 56px;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border: none;
  border-top: 1px solid var(--stroke-card);
  border-radius: 0;
  z-index: 9998;
  backdrop-filter: blur(12px);
  box-shadow: 0 -2px 10px rgba(11, 45, 74, 0.06);
}

.app-bottom-nav--global .nav-item,
.app-bottom-nav.iifin-bottom-nav .nav-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground) !important;
  text-decoration: none;
  padding: 6px 4px 4px;
  min-height: 44px;
  border-radius: var(--radius-md);
  transition: color .2s ease, background .2s ease;
}

.app-bottom-nav--global .nav-item .material-symbols-outlined,
.app-bottom-nav--global .nav-item span,
.app-bottom-nav.iifin-bottom-nav .nav-item .material-symbols-outlined,
.app-bottom-nav.iifin-bottom-nav .nav-item span{
  color: inherit !important;
}

.app-bottom-nav--global .nav-item .material-symbols-outlined,
.app-bottom-nav.iifin-bottom-nav .nav-item .material-symbols-outlined{
  font-size: 24px;
  line-height: 1;
}

.app-bottom-nav--global .nav-item:hover,
.app-bottom-nav.iifin-bottom-nav .nav-item:hover{
  color: var(--primary) !important;
}

.app-bottom-nav--global .nav-item.is-active,
.app-bottom-nav.iifin-bottom-nav .nav-item.is-active{
  color: var(--primary) !important;
}

.app-bottom-nav--global .nav-item.is-active .material-symbols-outlined,
.app-bottom-nav.iifin-bottom-nav .nav-item.is-active .material-symbols-outlined{
  font-variation-settings: 'FILL' 1;
}

/* FAB slot — центр таббара, FAB выступает вверх за пределы панели */
.app-bottom-nav--global .iifin-fab-slot,
.app-bottom-nav.iifin-bottom-nav .iifin-fab-slot{
  flex: 0 0 62px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  min-height: 62px;
}

/* FAB кнопка — выступает вверх за пределы таббара (+10% размер: 62px) */
.app-bottom-nav--global #iifin-fab-trigger,
.app-bottom-nav.iifin-bottom-nav #iifin-fab-trigger,
.app-bottom-nav--global .iifin-fab-slot .iifin-fab,
.app-bottom-nav.iifin-bottom-nav .iifin-fab-slot .iifin-fab{
  position: absolute !important;
  top: -22px !important;
  left: 50% !important;
  width: 62px !important;
  height: 62px !important;
  margin-left: -31px !important;
  border-radius: 50% !important;
  border: none !important;
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: 0 -4px 16px rgba(36, 168, 166, 0.4), 0 4px 12px rgba(36, 168, 166, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  z-index: 9999 !important;
  transform: translateX(0) !important;
}

.app-bottom-nav--global #iifin-fab-trigger:hover,
.app-bottom-nav.iifin-bottom-nav #iifin-fab-trigger:hover{
  transform: scale(1.05) !important;
  box-shadow: 0 -4px 20px rgba(36, 168, 166, 0.45), 0 6px 16px rgba(36, 168, 166, 0.4) !important;
}

.app-bottom-nav--global #iifin-fab-trigger:active,
.app-bottom-nav.iifin-bottom-nav #iifin-fab-trigger:active{
  transform: scale(0.98) !important;
}

.app-bottom-nav .iifin-fab .material-symbols-outlined{
  font-size: 32px !important;
  font-variation-settings: 'FILL' 1;
}

/* FAB Menu — bottom sheet «Добавить запись» (край в край, прижат к низу экрана) */
.iifin-fab-menu-overlay{
  position: fixed;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(11, 45, 74, 0.45);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.iifin-fab-menu-overlay.is-open{
  opacity: 1;
  visibility: visible;
}

.iifin-fab-sheet{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--iifin-sheet-bottom, 0) !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  max-height: 75dvh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 32px rgba(11, 45, 74, 0.12);
  z-index: 10001;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-y: auto;
  box-sizing: border-box;
}

.iifin-fab-menu-overlay.is-open .iifin-fab-sheet{
  transform: translateY(0);
}

.iifin-fab-sheet__gripper{
  width: 36px;
  height: 4px;
  background: var(--neutral-300);
  border-radius: 2px;
  margin: 10px auto 4px;
  cursor: grab;
  touch-action: none; /* для свайпа вниз */
}
.iifin-fab-sheet__gripper:active{
  cursor: grabbing;
}

.iifin-fab-sheet__head{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px 16px;
  position: relative;
}

.iifin-fab-sheet__title{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--foreground);
}

.iifin-fab-sheet__body{
  padding: 0 16px 24px;
}

.iifin-fab-sheet__section{
  margin-bottom: 20px;
}

.iifin-fab-sheet__heading{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.iifin-fab-sheet__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ОСНОВНЫЕ ОПЕРАЦИИ — крупные кнопки Расход/Доход */
.iifin-fab-sheet__btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  min-height: 100px;
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.iifin-fab-sheet__btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.iifin-fab-sheet__btn--expense{
  background: var(--danger-light);
  color: var(--danger-dark);
}

.iifin-fab-sheet__btn--expense .iifin-fab-sheet__btn-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iifin-fab-sheet__btn--expense .material-symbols-outlined{ font-size: 24px; }

.iifin-fab-sheet__btn--income{
  background: var(--success-light);
  color: var(--success-dark);
}

.iifin-fab-sheet__btn--income .iifin-fab-sheet__btn-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iifin-fab-sheet__btn--income .material-symbols-outlined{ font-size: 24px; }

/* ИИ-ДЕЙСТВИЯ и ДОПОЛНИТЕЛЬНО — строки (референс: цвет рамки + лёгкая заливка) */
.iifin-fab-sheet__item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--foreground);
  font-weight: 500;
  font-size: 15px;
  background: rgba(0, 0, 0, 0.02);
  border: 1.5px solid var(--stroke-field, #e5e7eb);
  margin-bottom: 8px;
  transition: background .15s ease, border-color .15s ease;
}

.iifin-fab-sheet__item:last-child{ margin-bottom: 0; }

.iifin-fab-sheet__item:hover{
  background: var(--muted, #f3f4f6);
}

.iifin-fab-sheet__item .material-symbols-outlined{
  font-size: 22px;
  color: var(--muted-foreground, #6b7280);
}

/* ИИ-ДЕЙСТВИЯ: бирюзовая/фиолетовая рамка + лёгкая заливка внутри */
.iifin-fab-sheet__item--ai{
  background: rgba(36, 168, 166, 0.06);
  border-color: var(--primary, #24A8A6);
  color: var(--primary, #24A8A6);
}

.iifin-fab-sheet__item--ai:hover{
  background: rgba(36, 168, 166, 0.12);
  border-color: var(--primary, #24A8A6);
}

.iifin-fab-sheet__item--ai .material-symbols-outlined{
  color: var(--primary, #24A8A6);
}

/* Body scroll lock when FAB menu open */
body.iifin-fab-menu-open { overflow: hidden; }

@media (min-width: 1024px){
  .app-bottom-nav--global,
  .app-bottom-nav.iifin-bottom-nav,
  .iifin-fab-slot,
  .iifin-fab{ display: none !important; }
}

/* ========= Header Nav: Инструменты — сброс глобальных стилей кнопок (button, .iifin-btn и т.д.) ========= */
/* ID-селектор перебивает глобальные button/.button/.iifin-btn в Elementor Custom CSS */
@media (min-width: 1024px) {
  #iifin-header-tools-trigger,
  #iifin-header-tools-trigger:hover,
  #iifin-header-tools-trigger:focus {
    color: #6b7280 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px 12px !important;
  }
  #iifin-header-tools-trigger:hover {
    color: #0b7e95 !important;
    background: rgba(36, 168, 166, 0.08) !important;
  }
  #iifin-header-tools-trigger.is-open,
  #iifin-header-tools-trigger[aria-expanded="true"] {
    color: #0b7e95 !important;
    background: rgba(36, 168, 166, 0.12) !important;
  }
  .iifin-app-header .iifin-header-nav__trigger,
  .iifin-app-header .iifin-header-nav_trigger,
  .iifin-app-header .iifin-header-nav__trigger:hover,
  .iifin-app-header .iifin-header-nav_trigger:hover,
  .iifin-app-header .iifin-header-nav__trigger:focus,
  .iifin-app-header .iifin-header-nav_trigger:focus,
  .iifin-app-header .iifin-header-nav__trigger.is-open,
  .iifin-app-header .iifin-header-nav_trigger.is-open,
  .iifin-app-header .iifin-header-nav__trigger[aria-expanded="true"],
  .iifin-app-header .iifin-header-nav_trigger[aria-expanded="true"] {
    color: #6b7280 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px 12px !important;
  }
  .iifin-app-header .iifin-header-nav__trigger:hover,
  .iifin-app-header .iifin-header-nav_trigger:hover {
    color: #0b7e95 !important;
    background: rgba(36, 168, 166, 0.08) !important;
  }
  .iifin-app-header .iifin-header-nav__trigger.is-open,
  .iifin-app-header .iifin-header-nav_trigger.is-open {
    color: #0b7e95 !important;
    background: rgba(36, 168, 166, 0.12) !important;
  }
  .iifin-app-header .iifin-header-nav__dropdown,
  .iifin-app-header .iifin-header-nav_dropdown {
    flex: 0 0 auto !important;
    display: inline-flex !important;
  }
  .iifin-app-header .iifin-header-nav__trigger,
  .iifin-app-header .iifin-header-nav_trigger {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
}