/* Navigation, tabs, breadcrumbs, pagination, sidebar, search & filters */

.navbar { display: flex; align-items: center; justify-content: space-between; background: var(--paper-raised); border-bottom: 1px solid var(--line-subtle); padding: 10px var(--space-5); position: sticky; top: 0; z-index: var(--z-header); }
.navbar .links { display: flex; gap: 22px; }
.navbar .links a { font-size: 13.5px; font-weight: 600; color: var(--ink-500); display: flex; align-items: center; gap: 6px; }
.navbar .links a.active { color: var(--ink-900); }
.navbar .right { display: flex; align-items: center; gap: 10px; }
.navbar .brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 800; font-size: 15px; }
.navbar .brand .mark { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--ink-900); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }

.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--mobile-nav-height); background: var(--paper-raised); border-top: 1px solid var(--line-subtle); z-index: var(--z-header); }
.mobile-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 600; color: var(--ink-500); }
.mobile-nav a.active { color: var(--ink-900); }
.mobile-nav a i { font-size: 20px; }
@media (max-width: 768px) {
  .mobile-nav { display: flex; }
  body { padding-bottom: var(--mobile-nav-height); }
}

.tabs { display: flex; gap: var(--space-6); border-bottom: 1.5px solid var(--line-subtle); }
.tabs a, .tabs button { background: none; border: none; padding: 10px 2px; font-size: 13.5px; font-weight: 600; color: var(--ink-500); cursor: pointer; position: relative; font-family: inherit; }
.tabs a.active, .tabs button.active { color: var(--ink-900); }
.tabs a.active::after, .tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 2.5px; background: var(--ink-900); border-radius: 2px; }

.breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-500); }
.breadcrumbs a { color: var(--ink-500); font-weight: 500; }
.breadcrumbs a:last-child { color: var(--ink-900); font-weight: 600; }
.breadcrumbs i { font-size: 13px; color: var(--ink-300); }

.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--radius-sm); border: 1.3px solid var(--line-subtle); background: var(--paper-raised); font-size: 12.5px; font-weight: 600; color: var(--ink-700); display: inline-flex; align-items: center; justify-content: center; }
.pagination .active { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper); }
.pagination [aria-disabled="true"] { opacity: .4; }

.side-nav {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  background: var(--paper-raised); color: var(--ink-900);
  padding: var(--space-6) var(--space-5) var(--space-10);
  border-right: 1px solid var(--line-subtle);
}
.side-nav .brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.side-nav .brand .mark { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--ink-900); display: flex; align-items: center; justify-content: center; color: var(--paper); font-size: 16px; flex: none; }
.side-nav .brand .word { font-size: 15px; font-weight: 800; color: var(--ink-900); letter-spacing: -0.01em; }
.side-nav .brand .word small { display: block; font-weight: 500; font-size: 11px; color: var(--ink-500); letter-spacing: 0; margin-top: 1px; }
.side-nav .group-label { font-size: 11px; font-weight: 600; color: var(--ink-400); margin: var(--space-6) 0 var(--space-2) var(--space-2); }
.side-nav .group-label:first-of-type { margin-top: 0; }
.side-nav a.nav-link { display: flex; align-items: center; gap: var(--space-3); padding: 7px 9px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--ink-700); font-weight: 500; }
.side-nav a.nav-link:hover { background: var(--paper-sunken); color: var(--ink-900); }
.side-nav a.nav-link.active { background: var(--ink-900); color: var(--paper); }
.side-nav a.nav-link i { font-size: 16px; color: var(--ink-400); }
.side-nav a.nav-link.active i { color: var(--paper); }

.stepper-flow { display: flex; align-items: center; }
.stepper-flow .step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; }
.stepper-flow .step .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--paper-sunken); color: var(--ink-500); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; z-index: 1; border: 1.5px solid var(--line-default); }
.stepper-flow .step.done .dot { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.stepper-flow .step.now .dot { background: var(--paper-raised); color: var(--ink-900); border: 2px solid var(--ink-900); }
.stepper-flow .step span { font-size: 11px; color: var(--ink-500); font-weight: 600; }
.stepper-flow .step:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 18px); width: calc(100% - 36px); height: 2px; background: var(--line-subtle); }
.stepper-flow .step.done:not(:last-child)::after { background: var(--ink-900); }

/* Search & filters */

.search-bar { display: flex; align-items: center; gap: 10px; background: var(--paper-raised); border: 1.5px solid var(--line-default); border-radius: var(--radius-pill); padding: 8px 8px 8px 16px; }
.search-bar i { color: var(--ink-400); font-size: 18px; }
.search-bar input { border: none; outline: none; flex: 1; font-size: 14px; background: transparent; font-family: inherit; color: var(--ink-900); }
.search-bar .go { background: var(--ink-900); color: var(--paper); border: none; border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-pill); border: 1.3px solid var(--line-default); background: var(--paper-raised); font-size: 12.5px; font-weight: 600; color: var(--ink-700); cursor: pointer; }
.filter-pill i { font-size: 14px; }
.filter-pill.active { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper); }

.suggestion-list { background: var(--paper-raised); border: 1px solid var(--line-subtle); border-radius: var(--radius-lg); overflow: hidden; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown); box-shadow: var(--shadow-soft); }
.suggestion-list .row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; }
.suggestion-list .row:hover { background: var(--paper-sunken); }
.suggestion-list .row i { color: var(--ink-400); font-size: 16px; }
.suggestion-list .row small { color: var(--ink-500); margin-left: auto; font-size: 11px; }

/* Navbar extras — user menu, notifications */
.nav-user, .nav-bell { position: relative; }
.nav-user-btn { background: none; border: none; cursor: pointer; padding: 0; display: flex; }
.navbar .dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: var(--paper-raised); border: 1px solid var(--line-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-float); min-width: 200px; padding: 6px; z-index: 50; display: flex; flex-direction: column; }
.navbar .dropdown a { padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--ink-700); }
.navbar .dropdown a:hover, .navbar .dropdown button:hover { background: var(--paper-sunken); }
.navbar .dropdown form { display: contents; }
.navbar .dropdown button { text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--ink-700); background: none; border: none; cursor: pointer; font-family: inherit; }
.nav-bell .bell { position: relative; }
.badge-count { position: absolute; top: -4px; right: -4px; background: var(--ink-900); color: var(--paper); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.notif-dropdown { width: 340px; max-width: 90vw; max-height: 420px; overflow-y: auto; }
.notif-panel { display: flex; flex-direction: column; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line-subtle); font-size: 13px; }
.notif-empty { padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--ink-500); }
.notif-list { display: flex; flex-direction: column; padding: 6px; }