/* base-layout.css v2 — Modern Admin Layout */
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:#f6f8fb;color:#101828;-webkit-font-smoothing:antialiased}

/* ===== Top bar ===== */
.top{background:#fff;border-bottom:1px solid #eaecf0;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
.title{font-weight:700;font-size:18px;color:#1f2937}
.top-actions{display:flex;gap:8px;align-items:center}
.profile-name{font-size:13px;color:#344054;font-weight:600}

/* ===== Layout grid ===== */
.layout{max-width:100%;margin:10px 8px;padding:0;display:grid;grid-template-columns:172px minmax(0,1fr);gap:10px;align-items:start}

/* ===== Sidebar ===== */
.sidebar{background:#fff;border:1px solid #eaecf0;border-radius:14px;padding:8px;position:sticky;top:12px;transition:box-shadow .2s}
.sidebar:hover{box-shadow:0 4px 16px rgba(16,24,40,.04)}

.menu-group{margin-bottom:4px}
.menu-head{height:34px;width:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-radius:10px;color:#475467;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s}
.menu-head:hover{background:#f2f4f7}
.menu-chevron{font-size:12px;color:#98a2b3;transition:transform .2s}
.menu-group.open .menu-chevron{transform:rotate(90deg)}
.menu-group.open .menu-body{display:block}
.menu-body{display:none;padding-top:3px}
.menu-link{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:10px;text-decoration:none;color:#344054;font-size:13px;font-weight:600;transition:all .15s}
.menu-link:hover{background:#f2f4f7;color:#1f2937}
.menu-link.active{background:linear-gradient(135deg,#eef4ff,#e6efff);color:#1d4ed8;font-weight:700}
.submenu{padding-left:0;margin-top:2px}
.menu-body .menu-link{padding-left:18px}
.content{min-width:0}
.wrap{max-width:none;margin:0;padding:0}

/* ===== Panel / Card ===== */
.panel{background:#fff;border:1px solid #eaecf0;border-radius:14px;overflow:hidden;transition:box-shadow .2s}
.panel:hover{box-shadow:0 1px 4px rgba(16,24,40,.04)}

/* ===== Toolbar ===== */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* ===== Filters ===== */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters input,.filters select{height:36px;border:1px solid #d0d5dd;border-radius:10px;font-size:13px;background:#fff;color:#344054}

/* ===== Pagination ===== */
.pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px}
.page-nav{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;justify-content:center;white-space:nowrap}
.page-meta,.meta{color:#667085;font-size:12px;justify-self:end}
.page-size{display:inline-flex;align-items:center;gap:6px}
.page-jump{display:inline-flex;align-items:center;gap:6px;margin-left:8px;position:relative}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
}
@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .pagination{grid-template-columns:1fr}
  .page-nav{justify-content:flex-start;overflow-x:auto;padding-bottom:4px}
}

/* ===== Top bar ===== */
.top{background:#fff;border-bottom:1px solid #eaecf0;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
.top-actions{display:flex;gap:8px;align-items:center}
.profile-name{font-size:13px;color:#344054;font-weight:600}
.user-menu{position:relative}
.avatar-btn{width:42px;height:42px;border-radius:999px;border:1px solid #d0d5dd;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;overflow:hidden}
.avatar-btn:hover{background:#f2f4f7}
.avatar-img{width:100%;height:100%;object-fit:cover}
.user-dropdown{position:absolute;right:0;top:44px;width:max-content;min-width:0;background:#fff;border:1px solid #eaecf0;border-radius:12px;box-shadow:0 14px 32px rgba(16,24,40,.14);padding:6px;display:none;z-index:1200}
.user-dropdown a{display:block;height:34px;line-height:34px;padding:0 10px;border-radius:8px;text-decoration:none;color:#344054;font-size:13px;white-space:nowrap}
.user-dropdown a:hover{background:#f2f4f7}
.user-dropdown a.logout{color:#b42318}
.notif-bell:hover{background:#f2f4f7}
:root[data-theme="dark"] .notif-bell svg{stroke:#94a3b8}
:root[data-theme="dark"] .notif-bell:hover{background:#334155}