/* assets/css/app.css */
/* ================= Base & Theme ================= */
:root{
  --sidebar-w: 264px;
  --topbar-h: 58px;
  --bg: #f6f7fb;

  --surface: #ffffff;
  --text: #344054;
  --muted: #667085;

  --primary: #0a58ca;       /* Bootstrap primary tonuna yakın */
  --primary-50: #e6f0ff;
  --hover: #f2f4f7;
  --line: #eef2f7;

  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --shadow-md: 0 8px 16px rgba(16,24,40,.08);
}

html, body { height: 100%; background: var(--bg); color: var(--text); }
a { text-decoration: none; }

/* ================= Layout ================= */
.sidebar{
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  z-index: 1030; overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.main{
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  background: var(--bg);
}

.topbar{
  height: var(--topbar-h);
  padding: .5rem 1rem;
  background: var(--surface);
  position: sticky; top: 0; z-index: 1020;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.content{ padding-top: 1rem; }

/* ================= Sidebar Header ================= */
.sidebar .brand{
  padding: .875rem 1rem;
  display: flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid var(--line);
}

.sidebar .presence{
  padding: .75rem 1rem; font-size: .825rem; color: var(--muted);
}

/* ================= Nav / Menu ================= */
.sidebar-nav { padding: .5rem .5rem 1.25rem; }

.nav .nav-link{
  color: var(--text);
  border-radius: .6rem;
  padding: .6rem .75rem;
  display: flex; align-items: center; gap: .5rem;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.nav .nav-link:hover{
  background: var(--hover);
  color: var(--text);
}

.nav .nav-link.active{
  background: var(--primary-50);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(10,88,202,.10);
}

/* Dropdown toggle (button görünümlü link) */
.dropdown-toggle-btn{
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
  padding: .6rem .75rem;
  color: var(--text);
  border-radius: .6rem;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .15s ease, color .15s ease;
}

.dropdown-toggle-btn:hover{ background: var(--hover); }

.dropdown-toggle-btn .bi-chevron-down{
  transition: transform .2s ease;
}

/* aria-expanded true olduğunda oku döndür */
.dropdown-toggle-btn[aria-expanded="true"] .bi-chevron-down{
  transform: rotate(180deg);
}

/* Alt menü (submenu) */
.submenu{
  padding-left: .5rem;
  border-left: 2px solid var(--line);
  margin: .25rem 0 .8rem .4rem;
}

.submenu-link{
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .65rem;
  margin: .15rem 0;
  border-radius: .5rem;
  color: #475467;
  font-size: .935rem;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}

.submenu-link:hover{
  background: var(--hover);
  color: var(--primary);
}

.submenu-link.active{
  background: var(--primary-50);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(10,88,202,.10);
}

/* Küçük sayım rozeti (örn. bekleyen iş) – isterseniz HTML’de <span class="count">12</span> ekleyin */
.submenu-link .count{
  margin-left: auto;
  background: #eef2ff;
  color: #3538cd;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
}

/* Ayırıcı */
.sidebar hr{
  margin: .8rem .5rem;
  border-top: 1px solid var(--line);
}

/* ================= Footer ================= */
.footer{
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* ================= Scrollbar (görsel iyileştirme) ================= */
.sidebar::-webkit-scrollbar{ width: 10px; }
.sidebar::-webkit-scrollbar-thumb{
  background: #e6e9ef;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sidebar:hover::-webkit-scrollbar-thumb{ background: #d9dde5; }

/* ================= Cards ================= */
.card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-header{
  background: #fff; border-bottom: 1px solid var(--line);
}

/* ================= Forms ================= */
.form-control, .form-select{
  border-radius: .6rem;
  border-color: #e4e7ec;
}
.input-group-text{
  background: #fff; border-color: #e4e7ec;
}

/* ================= Badges ================= */
.badge{ border-radius: 8px; }

/* ================= Responsive ================= */
@media (max-width: 991.98px){
  .sidebar{
    transform: translateX(-100%);
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: var(--shadow-md);
  }
  .sidebar.show{ transform: translateX(0); }
  .main{ margin-left: 0; }
}

/* ================= Utility ================= */
.text-muted{ color: var(--muted) !important; }