/* Navigation refresh — visual-only.
   This stylesheet changes navigation appearance only.
   It does not change navigation onclick handlers or page logic. */

:root{
  --nav-ink:#172033;
  --nav-muted:#718096;
  --nav-accent:#2563eb;
  --nav-accent-soft:#eaf2ff;
  --nav-surface:#ffffff;
  --nav-border:#e4eaf2;
}

/* =========================
   DESKTOP SIDEBAR
   ========================= */
.side{
  background:
    radial-gradient(circle at 15% 5%,rgba(96,165,250,.20),transparent 28%),
    linear-gradient(180deg,#17243a 0%,#0f1a2c 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:12px 0 35px rgba(15,23,42,.10)!important;
}

.side .brand{
  padding:24px 20px 22px!important;
  font-size:18px!important;
  font-weight:800!important;
  letter-spacing:-.02em;
}

.side .nav{
  display:flex!important;
  flex-direction:column;
  gap:7px!important;
  padding:4px 12px!important;
}

.side .nav button,
.side>button[onclick="logout()"]{
  position:relative;
  overflow:hidden;
  display:flex!important;
  align-items:center;
  gap:12px!important;
  min-height:48px!important;
  padding:10px 13px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  background:transparent!important;
  color:#b8c4d6!important;
  font-size:13px!important;
  font-weight:700!important;
  text-align:left!important;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease!important;
}

.side .nav button::before,
.side>button[onclick="logout()"]::before{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:10px;
  background:rgba(255,255,255,.07);
  color:#dbeafe;
  font-size:16px;
  line-height:1;
}

.side .nav button::after,
.side>button[onclick="logout()"]::after{
  position:absolute;
  right:14px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#60a5fa;
  opacity:0;
  transform:scale(.5);
  transition:opacity .18s ease,transform .18s ease;
  content:"";
}

.side .nav button:hover,
.side>button[onclick="logout()"]:hover{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  transform:translateX(2px);
}

.side .nav button.active{
  background:linear-gradient(135deg,rgba(59,130,246,.24),rgba(37,99,235,.12))!important;
  border-color:rgba(96,165,250,.24)!important;
  color:#fff!important;
  box-shadow:inset 3px 0 0 #60a5fa,0 8px 20px rgba(0,0,0,.10);
}

.side .nav button.active::after{
  opacity:1;
  transform:scale(1);
}

.side .nav button[onclick*="dashboard"]::before{content:"⌂"}
.side .nav button[onclick*="loans"]::before{content:"▣"}
.side .nav button[onclick*="borrowers"]::before{content:"♙"}
.side .nav button[onclick*="admin"]::before{content:"⚙"}
.side>button[onclick="logout()"]::before{content:"↪"}

.side>button[onclick="logout()"],
.side>button.account-button{
  margin:18px 12px 0!important;
  width:calc(100% - 24px)!important;
  color:#aebbd0!important;
}

.side>button.account-button::before{content:"👤"}
.side>button.account-button::after{content:""}

.side .user{
  margin:14px 12px 0!important;
  padding:12px!important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px!important;
  background:rgba(255,255,255,.05);
}

/* =========================
   PORTRAIT MOBILE
   ========================= */
@media (max-width:850px) and (orientation:portrait){
  .bottom{
    display:flex!important;
    position:fixed!important;
    z-index:90!important;
    left:12px!important;
    right:12px!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    height:68px!important;
    padding:6px!important;
    gap:5px!important;
    border:1px solid rgba(226,232,240,.95)!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.94)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    box-shadow:0 14px 38px rgba(15,23,42,.16),0 2px 8px rgba(15,23,42,.06)!important;
  }

  .bottom button{
    position:relative!important;
    display:flex!important;
    flex:1!important;
    min-width:0!important;
    height:56px!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:3px!important;
    padding:6px 4px!important;
    border:0!important;
    border-radius:17px!important;
    background:transparent!important;
    color:var(--nav-muted)!important;
    font-size:0!important;
    line-height:1!important;
    font-weight:700!important;
    transition:background .18s ease,color .18s ease,transform .18s ease!important;
  }

  .bottom button::before{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:10px;
    font-size:17px;
    line-height:1;
    transition:background .18s ease,color .18s ease,transform .18s ease;
  }

  .bottom button::after{
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.01em;
  }

  .bottom button[onclick*="dashboard"]::before{content:"⌂"}
  .bottom button[onclick*="dashboard"]::after{content:"Home"}
  .bottom button[onclick*="loans"]::before{content:"▣"}
  .bottom button[onclick*="loans"]::after{content:"Loans"}
  .bottom button[onclick*="borrowers"]::before{content:"♙"}
  .bottom button[onclick*="borrowers"]::after{content:"Borrowers"}
  .bottom button[onclick*="admin"]::before{content:"⚙"}
  .bottom button[onclick*="admin"]::after{content:"Users"}
  .bottom button[onclick="logout()"]::before{content:"↪"}
  .bottom button[onclick="logout()"]::after{content:"Logout"}
  .bottom button.account-button::before{content:"👤"}
  .bottom button.account-button::after{content:"Account"}
  .bottom button.account-button::before{content:"👤"}
  .bottom button.account-button::after{content:"Account"}

  .bottom button.active{
    background:linear-gradient(145deg,#edf5ff,#e4efff)!important;
    color:var(--nav-accent)!important;
    box-shadow:inset 0 0 0 1px rgba(37,99,235,.08)!important;
  }

  .bottom button.active::before{
    background:#d7e8ff;
    color:var(--nav-accent);
    transform:translateY(-1px);
  }

  .bottom button:active{
    transform:scale(.96);
  }

  .main{
    padding-bottom:100px!important;
  }
}

/* =========================
   LANDSCAPE MOBILE / TABLET
   ========================= */
@media (orientation:landscape) and (max-width:1100px) and (max-height:600px){
  .bottom{
    display:flex!important;
    position:fixed!important;
    z-index:90!important;
    left:16px!important;
    top:16px!important;
    right:auto!important;
    bottom:auto!important;
    width:78px!important;
    height:auto!important;
    padding:7px!important;
    flex-direction:column!important;
    gap:5px!important;
    border:1px solid rgba(226,232,240,.95)!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.94)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    box-shadow:0 14px 34px rgba(15,23,42,.16)!important;
  }

  .bottom button{
    position:relative!important;
    display:flex!important;
    width:64px!important;
    height:58px!important;
    min-height:58px!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:3px!important;
    padding:5px 3px!important;
    border:0!important;
    border-radius:15px!important;
    background:transparent!important;
    color:var(--nav-muted)!important;
    font-size:0!important;
    line-height:1!important;
    font-weight:800!important;
  }

  .bottom button::before{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:9px;
    font-size:16px;
    line-height:1;
  }

  .bottom button::after{
    font-size:8px;
    line-height:1;
    font-weight:800;
  }

  .bottom button[onclick*="dashboard"]::before{content:"⌂"}
  .bottom button[onclick*="dashboard"]::after{content:"Home"}
  .bottom button[onclick*="loans"]::before{content:"▣"}
  .bottom button[onclick*="loans"]::after{content:"Loans"}
  .bottom button[onclick*="borrowers"]::before{content:"♙"}
  .bottom button[onclick*="borrowers"]::after{content:"Borrowers"}
  .bottom button[onclick*="admin"]::before{content:"⚙"}
  .bottom button[onclick*="admin"]::after{content:"Users"}
  .bottom button[onclick="logout()"]::before{content:"↪"}
  .bottom button[onclick="logout()"]::after{content:"Logout"}

  .bottom button.active{
    background:linear-gradient(145deg,#edf5ff,#e4efff)!important;
    color:var(--nav-accent)!important;
    box-shadow:inset 0 0 0 1px rgba(37,99,235,.08)!important;
  }

  .bottom button.active::before{
    background:#d7e8ff;
    color:var(--nav-accent);
  }

  .main{
    padding-left:108px!important;
    padding-bottom:82px!important;
  }
}

/* Give the navigation keyboard users a clear focus state without
   changing any existing navigation behavior. */
.side button:focus-visible,
.bottom button:focus-visible{
  outline:3px solid rgba(96,165,250,.45)!important;
  outline-offset:2px!important;
}


/* Account modal: keep Logout text readable on its red action button. */
#accountModal .danger{
  color:#fff!important;
}