/* ==========================================================================
   Jethur v3 — App shell layout (Navbar · Header · Content)
   Source: Design System → Navigation & Layout → Navbar / Header
   ========================================================================== */

:root { --sidebar-w: 240px; --sidebar-rail-w: 60px; --header-h: 64px; }

.app { display: flex; min-height: 100vh; background: var(--content-bg); }

/* --------------------------------------------------------------------------
   Sidebar (Navbar)
   -------------------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-w); flex: 0 0 auto; background: var(--nav-bar); color: var(--nav-text);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  transition: width .2s ease; overflow: hidden; z-index: 50;
  font-family: var(--font-spec); letter-spacing: 0;   /* sidebar keeps the Lexend Deca look from the reference */
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 14px 8px; height: 64px; }
.sidebar-top .logo { height: 30px; width: auto; }
.sidebar-top .logo-mark { display: none; }
.sidebar-toggle { border: none; background: none; color: #E6E6E6; cursor: pointer; display: inline-flex; padding: 6px; border-radius: 6px; }
.sidebar-toggle:hover { background: var(--nav-hover); }
.sidebar-toggle .ic { width: 16px; height: 16px; }

.sidebar-search { padding: 8px 12px 10px; }
.sidebar-search .control { height: 40px; border-radius: 10px; background: var(--nav-search-bg); border-color: var(--nav-search-border); color: #fff; padding: 0 12px; }
.sidebar-search .control .ic { color: #9BA2AD; width: 16px; height: 16px; }
.sidebar-search .control input { color: #fff; font-size: 13px; }
.sidebar-search .control input::placeholder { color: #9BA2AD; }
.sidebar-search .control:focus-within { border-color: var(--success-2); box-shadow: none; }

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 12px 12px; scrollbar-width: thin; scrollbar-color: #3A4143 transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #3A4143; border-radius: 3px; }

.nav-section { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--nav-section); padding: 14px 8px 4px; white-space: nowrap; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 8px; border-radius: 8px;
  color: var(--nav-text); font-size: 14px; font-weight: 400; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s; user-select: none;
}
.nav-link .nav-ic { width: 16px; height: 16px; color: var(--nav-icon); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.nav-link .nav-ic .ic { width: 16px; height: 16px; stroke-width: 1.6; }
.nav-link .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-link .nav-chev { color: #9BA2AD; transition: transform .2s; display: inline-flex; }
.nav-link .nav-chev .ic { width: 14px; height: 14px; stroke-width: 2; }
.nav-link:hover { background: var(--nav-hover); color: var(--nav-text-active); }
.nav-item.active > .nav-link { background: var(--nav-active); color: var(--nav-text-active); font-weight: 500; }
.nav-item.active > .nav-link .nav-ic { color: var(--success-2); }
.nav-item.open > .nav-link .nav-chev { transform: rotate(180deg); }
.nav-item.ai > .nav-link { color: var(--ai-accent); }
.nav-item.ai > .nav-link:hover { background: var(--nav-hover); color: var(--ai-accent); }
.nav-item.ai.active > .nav-link { background: var(--nav-active); }
.nav-link .nav-badge { margin-left: auto; }
.nav-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; background: var(--newbie-3); border: 1px solid var(--newbie-2); color: var(--newbie-1); font-size: 11px; }

.nav-sub { display: none; flex-direction: column; margin: 2px 0 4px 15px; border-left: 1.5px solid var(--nav-sub-bar); padding-left: 14px; }
.nav-item.open > .nav-sub { display: flex; }
.nav-sub a { display: flex; align-items: center; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--nav-text); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-sub a:hover { color: var(--nav-text-active); background: var(--nav-hover); }
.nav-sub a.active { color: var(--nav-sub-active); font-weight: 600; }

.sidebar-foot { border-top: 1px solid var(--nav-divider); padding: 12px 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nav-text); white-space: nowrap; }
.sidebar-foot .powered-logo { height: 18px; width: auto; }
.sidebar-foot .ver { margin-left: auto; height: 20px; padding: 0 7px; border-radius: 4px; background: #2A3A2A; color: #E6E6E6; font-size: 10px; font-weight: 500; display: inline-flex; align-items: center; }

/* Collapsed rail */
.app.collapsed .sidebar { width: var(--sidebar-rail-w); }
.app.collapsed .sidebar-top { padding: 18px 0 8px; justify-content: center; }
.app.collapsed .sidebar-top .logo { display: none; }
.app.collapsed .sidebar-search, .app.collapsed .nav-section, .app.collapsed .nav-label, .app.collapsed .nav-chev, .app.collapsed .nav-badge, .app.collapsed .nav-sub, .app.collapsed .sidebar-foot .powered, .app.collapsed .sidebar-foot .ver { display: none; }
.app.collapsed .sidebar-nav { padding: 8px 10px; }
.app.collapsed .nav-link { justify-content: center; padding: 0; width: 38px; height: 38px; margin: 6px auto; }
.app.collapsed .nav-link .nav-ic { width: 18px; height: 18px; }
.app.collapsed .nav-link .nav-ic .ic { width: 18px; height: 18px; }
.app.collapsed .nav-divider { display: block; height: 1px; background: var(--nav-divider); margin: 10px 4px; }
.app.collapsed .sidebar-foot { justify-content: center; padding: 14px 0; }
.app.collapsed .sidebar-foot .powered-logo { height: 24px; }
.nav-divider { display: none; }
.app.collapsed .nav-item { position: relative; }
.app.collapsed .nav-item:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--nav-bar); color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; z-index: 60; box-shadow: var(--shadow-md); }

/* --------------------------------------------------------------------------
   Main / Header
   -------------------------------------------------------------------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--header-h); background: #fff; border-bottom: 1px solid var(--stroke-1); display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 0 24px; position: sticky; top: 0; z-index: 40; }
.topbar .bell { position: relative; border: none; background: none; cursor: pointer; color: var(--text-primary); display: inline-flex; padding: 6px; border-radius: 8px; }
.topbar .bell:hover { background: var(--inactive-3); }
.topbar .bell .ic { width: 20px; height: 20px; }
.topbar .bell .dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--warning-1); border: 1.5px solid #fff; }
.topbar .user-pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 8px; border-radius: 12px; background: var(--inactive-3); cursor: pointer; border: none; }
.topbar .user-pill:hover { background: var(--inactive-2); }
.topbar .user-pill .avatar { width: 28px; height: 28px; }
.topbar .user-pill .u-name { font-size: 13px; color: var(--text-primary); line-height: 1.2; text-align: left; }
.topbar .user-pill .u-role { font-size: 11px; color: var(--text-secondary); line-height: 1.2; text-align: left; }
.topbar .user-pill .ic { width: 16px; height: 16px; color: var(--text-primary); }
.topbar .dropdown > .menu { top: calc(100% + 8px); }
.topbar .notif-anchor { position: relative; }
.topbar .notif-anchor .notif-panel { position: absolute; right: 0; top: calc(100% + 8px); display: none; z-index: 60; }
.topbar .notif-anchor.open .notif-panel { display: block; }

.content { padding: 24px; flex: 1; }

/* Page header card */
.page-header { background: #fff; border: 1px solid var(--stroke-1); border-radius: 12px; padding: 14px 20px 0; margin-bottom: 20px; }
.page-header .ph-crumbs { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--stroke-1); }
.page-header .ph-crumbs .help { font-size: 12px; color: var(--text-link); text-decoration: underline; font-weight: 500; }
.page-header .ph-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; flex-wrap: wrap; }
.page-header .ph-title { font-size: 16px; font-weight: 500; }
.page-header .ph-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.page-header .ph-meta { display: flex; align-items: center; }
.page-header .ph-tabs { padding-bottom: 0; }
.page-header .ph-tabs .tabs { border-bottom: none; }
.page-header.no-tabs { padding-bottom: 0; }
.page-header .ph-main:last-child { padding-bottom: 16px; }
.page-header .ph-actions { display: flex; align-items: center; gap: 8px; }
.page-header .ph-title-wrap { display: flex; align-items: center; gap: 12px; }
.page-header .ph-title-ic { display: inline-flex; flex: 0 0 auto; }
/* Large variant — record/folder detail headers */
.page-header.lg { padding: 18px 24px 0; }
.page-header.lg .ph-crumbs { padding-bottom: 16px; }
.page-header.lg .breadcrumb { font-size: 15px; gap: 10px; }
.page-header.lg .breadcrumb .sep { font-size: 13px; }
.page-header.lg .breadcrumb .current { font-weight: 600; }
.page-header.lg .ph-main { padding: 20px 0; }
.page-header.lg .ph-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.page-header.lg .ph-sub { font-size: 14px; margin-top: 4px; }
.page-header.lg .meta-item { gap: 14px; padding: 0 24px; }
.page-header.lg .meta-item:last-child { padding-right: 0; }
.page-header.lg .meta-item .icon-tile { width: 40px; height: 40px; border-radius: 10px; }
.page-header.lg .meta-item .kv { display: flex; flex-direction: column; gap: 6px; }
.page-header.lg .meta-item .kv .k { font-size: 14px; color: var(--text-secondary); }
.page-header.lg .meta-item .kv .v { font-size: 15px; font-weight: 500; }
.page-header.lg .meta-item .user .avatar { width: 28px; height: 28px; font-size: 10px; }
.page-header.lg .meta-item .user .user-name { font-size: 15px; }
.page-header.lg .ph-actions .btn { height: 38px; font-size: 14px; border-radius: 8px; padding: 0 16px; }

@media (max-width: 960px) {
  .sidebar { position: fixed; left: 0; top: 0; }
  .app:not(.collapsed) .main { margin-left: var(--sidebar-w); }
  .app.collapsed .main { margin-left: var(--sidebar-rail-w); }
}