/* ==========================================================================
   KATJING FINANCE MONITOR — Layout
   Navigation, sidebar, tab bar, page structure.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Desktop Top Navigation
-------------------------------------------------------------------------- */
.topnav {
  background: var(--color-surface);
  border-bottom: 0.5px solid var(--color-border);
  padding: 0 var(--padding-page-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Logo */
.topnav__logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.topnav__logo-mark {
  width: 30px;
  height: 30px;
  background: var(--color-blue);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.topnav__logo-mark i { color: #fff; font-size: 16px; }

.topnav__logo-name {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: normal;
  color: var(--color-text);
  line-height: 1.1;
}

.topnav__logo-sub {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-2);
  font-family: var(--font-sans);
  line-height: 1;
}

/* Nav links */
.topnav__links {
  display: flex;
  gap: 0;
  list-style: none;
}

.topnav__link {
  font-size: var(--text-base);
  color: var(--color-text-2);
  text-decoration: none;
  padding: 0 14px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.topnav__link:hover { color: var(--color-text); text-decoration: none; }

.topnav__link.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-blue);
}

/* Language switcher */
.topnav__lang {
  display: flex;
  gap: 6px;
}

.lang-btn {
  font-size: var(--text-sm);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--color-border-mid);
  background: none;
  cursor: pointer;
  color: var(--color-text-2);
  transition: background var(--transition-fast);
  min-height: 28px;
}

.lang-btn.is-active {
  color: var(--color-text);
  background: var(--color-surface-2);
}


/* --------------------------------------------------------------------------
   Mobile Top Navigation
-------------------------------------------------------------------------- */
.topnav-mobile {
  background: var(--color-surface);
  border-bottom: 0.5px solid var(--color-border);
  padding: 0 var(--padding-page);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height-mobile);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topnav-mobile__back {
  font-size: var(--text-base);
  color: var(--color-blue);
  display: flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  /* 44px tap target */
  min-width: 44px;
  min-height: 44px;
  margin-left: -8px;
}

.topnav-mobile__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.topnav-mobile__action {
  font-size: var(--text-base);
  color: var(--color-blue);
  font-weight: var(--font-medium);
  background: none;
  border: none;
  cursor: pointer;
  /* 44px tap target */
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: -8px;
}


/* --------------------------------------------------------------------------
   Mobile Loan Switcher
   Horizontal scroll pill row below top nav on mobile.
-------------------------------------------------------------------------- */
.loan-switcher-bar {
  background: var(--color-surface);
  border-bottom: 0.5px solid var(--color-border);
  padding: 10px 0;
}

.loan-switcher-bar__inner {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--padding-page);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.loan-switcher-bar__inner::-webkit-scrollbar { display: none; }

.switcher-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 0.5px solid var(--color-border-mid);
  background: var(--color-surface);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-2);
  cursor: pointer;
  flex-shrink: 0;
  /* 44px tap target */
  min-height: 36px;
  transition: background var(--transition-fast);
}

.switcher-pill.is-active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
}

.switcher-pill i { font-size: 14px; }

/* Verdict dot on mobile pill */
.switcher-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.switcher-pill__dot--green { background: var(--color-green); }
.switcher-pill__dot--amber { background: var(--color-amber); }
.switcher-pill__dot--gray  { background: var(--color-text-3); }


/* --------------------------------------------------------------------------
   Two-column App Layout (Desktop)
-------------------------------------------------------------------------- */
.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: calc(100vh - var(--nav-height));
}


/* --------------------------------------------------------------------------
   Sidebar (Desktop)
-------------------------------------------------------------------------- */
.sidebar {
  background: var(--color-surface);
  border-right: 0.5px solid var(--color-border);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}

.sidebar__loan-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar__totals {
  border-top: 0.5px solid var(--color-border);
  padding-top: 1rem;
  margin-top: auto;
}

.sidebar__total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.sidebar__total-label {
  font-size: var(--text-sm);
  color: var(--color-text-2);
}

.sidebar__total-value {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.sidebar__total-value--large {
  font-size: var(--text-xl);
}


/* --------------------------------------------------------------------------
   Main Content Area
-------------------------------------------------------------------------- */
.main-content {
  padding: 1.75rem var(--padding-page-desktop);
  max-width: 100%;
  overflow-x: hidden;
}

.main-content__header { margin-bottom: 1.5rem; }

.main-content__title {
  font-size: 20px;
  font-weight: var(--font-normal);
  font-family: var(--font-serif);
  color: var(--color-text);
  margin-bottom: 2px;
}

.main-content__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-2);
}

/* Page wrapper for non-sidebar pages */
.page-content {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 1.75rem var(--padding-page-desktop);
}


/* --------------------------------------------------------------------------
   Mobile Bottom Tab Bar
-------------------------------------------------------------------------- */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 0.5px solid var(--color-border);
  display: none; /* hidden on desktop */
  padding: 8px 0;
  /* Safe area for iOS home indicator */
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 100;
}

.tab-bar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px 0;
  /* 44px tap target */
  min-height: 44px;
  justify-content: center;
  background: none;
  border: none;
}

.tab-bar__item i {
  font-size: 22px;
  color: var(--color-text-3);
  transition: color var(--transition-fast);
}

.tab-bar__item span {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  transition: color var(--transition-fast);
}

.tab-bar__item.is-active i,
.tab-bar__item.is-active span {
  color: var(--color-blue);
}

/* Spacer to prevent content being hidden behind tab bar on mobile */
.tab-bar-spacer { height: var(--tab-bar-height); display: none; }


/* --------------------------------------------------------------------------
   Mobile overrides
-------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Switch to single column */
  .app-layout {
    grid-template-columns: 1fr;
  }

  /* Hide desktop sidebar */
  .sidebar { display: none; }

  /* Show bottom tab bar */
  .tab-bar { display: flex; }
  .tab-bar-spacer { display: block; }

  /* Tighter page padding */
  .main-content,
  .page-content {
    padding: 1rem var(--padding-page);
  }

  /* Reduce section gap on mobile */
  .main-content__header { margin-bottom: 1rem; }

}

/* --------------------------------------------------------------------------
   Status bar (mockup / demo only)
-------------------------------------------------------------------------- */
.status-bar {
  background: var(--color-surface);
  padding: 12px 20px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-bar__time { font-size: 15px; font-weight: var(--font-semibold); }
.status-bar__icons { display: flex; gap: 5px; align-items: center; font-size: 13px; }