/*
 * dashboard-shell.css — reuses the xyz.am dashboard's navbar + sidebar look.
 * The sidebar (.dn-*) styles are the same ones the dashboard ships in
 * dashboard-nav.php, baked to their dark-mode values since the vault is dark.
 * Bundled into the app (served same-origin) so the strict CSP holds.
 */

/* ---- Layout ---- */
.app-navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px;
  background: #17181b;
  border-bottom: 1px solid #2c2c2c;
}
.app-navbar-brand img { display: block; height: 38px; }
.app-navbar-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.app-navbar-links a {
  color: #e9ecef; text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: 8px; white-space: nowrap;
}
.app-navbar-links a:hover { background: rgba(110,168,254,.12); color: #6ea8fe; }
.app-navbar-links i { margin-right: 6px; }

.app-body { display: flex; align-items: stretch; min-height: calc(100vh - 56px); }
.app-main { flex: 1; min-width: 0; }

/* ---- Sidebar (dn-* — same structure/classes as the dashboard) ---- */
.dn-sidebar {
  width: 232px; flex-shrink: 0; padding: 8px 0 16px;
  background: linear-gradient(180deg, #1f2024 0%, #17181b 100%);
  border-right: 1px solid #2c2c2c;
}
.dn-sidebar ul { list-style: none; margin: 0; padding: 0; }

.dn-heading {
  display: flex; align-items: center; gap: 8px;
  margin: 1rem .85rem .35rem; padding: .35rem .55rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #adb5bd;
}
.dn-heading i { color: #6c757d; font-size: .8rem; }

.dn-link {
  position: relative; display: flex; align-items: center; gap: 8px;
  margin: 2px .55rem; padding: .45rem .6rem;
  border-radius: 10px; color: #e9ecef; font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease, color .15s ease;
}
.dn-link:hover { background: rgba(110,168,254,.10); color: #6ea8fe; transform: translateX(3px); }
.dn-link.active { background: rgba(110,168,254,.15); color: #6ea8fe; font-weight: 600; }
.dn-link.active::before {
  content: ''; position: absolute; left: -2px; top: 18%; bottom: 18%;
  width: 4px; border-radius: 4px; background: var(--dn-tone, #6ea8fe);
}

.dn-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--dn-tone-bg, rgba(13,110,253,.12));
  color: var(--dn-tone, #6ea8fe);
  font-size: .9rem;
  transition: transform .2s ease;
}
.dn-link:hover .dn-icon { transform: rotate(-6deg) scale(1.06); }
.dn-link.active .dn-icon { background: var(--dn-tone, #6ea8fe); color: #fff; }

/* Tone palette — same keys the dashboard uses */
.dn-link[data-tone="blue"]   { --dn-tone:#0d6efd; --dn-tone-bg:rgba(13,110,253,.14); }
.dn-link[data-tone="green"]  { --dn-tone:#198754; --dn-tone-bg:rgba(25,135,84,.16); }
.dn-link[data-tone="teal"]   { --dn-tone:#0dcaf0; --dn-tone-bg:rgba(13,202,240,.16); }
.dn-link[data-tone="orange"] { --dn-tone:#fd7e14; --dn-tone-bg:rgba(253,126,20,.16); }
.dn-link[data-tone="purple"] { --dn-tone:#8a63d2; --dn-tone-bg:rgba(111,66,193,.18); }
.dn-link[data-tone="pink"]   { --dn-tone:#e685b5; --dn-tone-bg:rgba(214,51,132,.18); }
.dn-link[data-tone="red"]    { --dn-tone:#dc3545; --dn-tone-bg:rgba(220,53,69,.16); }
.dn-link[data-tone="yellow"] { --dn-tone:#ffc107; --dn-tone-bg:rgba(255,193,7,.18); }
.dn-link[data-tone="indigo"] { --dn-tone:#6610f2; --dn-tone-bg:rgba(102,16,242,.18); }
.dn-link[data-tone="gray"]   { --dn-tone:#adb5bd; --dn-tone-bg:rgba(108,117,125,.18); }

.dn-divider { margin: 1rem .85rem; border: 0; border-top: 1px solid rgba(255,255,255,.08); }

@media (max-width: 860px) {
  .dn-sidebar { display: none; }
  .app-navbar-links a span { display: none; }
}