/* Admin UI v2: grouped sidebar, hub tabs, 360 profile, charts, motion. */
:root { --ui-ease: cubic-bezier(.22,.8,.3,1); }

/* ---- grouped sidebar ---- */
.sb-v2 .sb-search { position: relative; margin: 0 .2rem .6rem; }
.sb-v2 .sb-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.55); font-size: .8rem; }
.sb-v2 .sb-search input { width: 100%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; border-radius: 999px; padding: .38rem .8rem .38rem 2rem; font-size: .8rem; outline: none; transition: background .2s, border-color .2s; }
.sb-v2 .sb-search input::placeholder { color: rgba(255,255,255,.5); }
.sb-v2 .sb-search input:focus { background: rgba(255,255,255,.16); border-color: var(--gold-light, #ecc656); }
.sb-group { margin: .25rem 0; border-radius: 14px; transition: background .25s; }
.sb-group.is-open { background: rgba(0,0,0,.14); }
.sb-head { width: 100%; display: flex; align-items: center; gap: .5rem; border: 0; background: transparent; color: #fbe7e7; font: inherit; font-size: .84rem; font-weight: 700; padding: .5rem .7rem; border-radius: 12px; text-align: left; cursor: pointer; transition: background .2s; }
.sb-head:hover { background: rgba(255,255,255,.12); }
.sb-head > i:first-child { color: var(--gold-light, #ecc656); font-size: .95rem; }
.sb-head span { flex: 1; }
.sb-caret { font-size: .7rem; transition: transform .3s var(--ui-ease); opacity: .7; }
.sb-group.is-open .sb-caret { transform: rotate(180deg); }
.sb-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ui-ease); }
.sb-group.is-open .sb-body { grid-template-rows: 1fr; }
.sb-inner { overflow: hidden; min-height: 0; padding: 0 .3rem; }
.sb-group.is-open .sb-inner { padding-bottom: .35rem; }
.sb-inner a { padding-left: 1.25rem !important; font-size: .82rem !important; }
.sb-inner a span { vertical-align: middle; }
.sb-badge { font-style: normal; font-size: .66rem; font-weight: 800; background: #e53935; color: #fff; border-radius: 999px; padding: .05rem .42rem; margin-left: .4rem; animation: sbPulse 2s infinite; }
@keyframes sbPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,57,53,.5); } 50% { box-shadow: 0 0 0 5px rgba(229,57,53,0); } }
.sb-v2 a { transition: background .2s, padding-left .2s, color .2s; }
.sb-v2.sb-filtering .sb-group .sb-body { grid-template-rows: 1fr; }
.sb-v2 .sb-hide { display: none !important; }

/* ---- hub tabs ---- */
.hub-tabs { display: flex; gap: .35rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -.3rem 0 1.1rem; padding: .35rem; background: #fff; border: 1px solid var(--line, #e8dcc8); border-radius: 16px; box-shadow: 0 10px 28px -22px rgba(151,22,26,.5); }
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tabs .hub-label { flex: 0 0 auto; align-self: center; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--gold-deep, #8f6d08); padding: 0 .6rem 0 .5rem; }
.hub-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 11px; font-size: .84rem; font-weight: 600; color: var(--wine, #4a1a1c); text-decoration: none; transition: background .2s, color .2s, transform .2s; white-space: nowrap; }
.hub-tabs a:hover { background: var(--gold-tint, #fbf4dc); transform: translateY(-1px); }
.hub-tabs a.on { background: linear-gradient(135deg, var(--crimson, #97161a), var(--crimson-soft, #b3262b)); color: #fff; box-shadow: 0 8px 16px -10px var(--crimson, #97161a); }
.hub-tabs a i { font-size: .95rem; }

/* ---- motion ---- */
@keyframes uiRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes uiFade { from { opacity: 0; } to { opacity: 1; } }
.admin-main { animation: uiFade .35s ease-out; }
.ui-rise { opacity: 0; animation: uiRise .55s var(--ui-ease) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
.admin-main .panel, .admin-main .ac-card, .admin-main .hr-card, .admin-main .stat-card, .admin-main .ui-card { transition: transform .25s var(--ui-ease), box-shadow .25s, border-color .25s; }
.admin-main .ac-card:hover, .admin-main .ui-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(151,22,26,.55); }
.admin-main .btn { transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.admin-main .btn:active { transform: scale(.97); }
.admin-main tbody tr { transition: background .15s; }
.admin-main .table-hover tbody tr:hover, .admin-main table.table tbody tr:hover { background: rgba(200,156,18,.07); }
.ui-prog { height: 8px; border-radius: 999px; background: #f1e6d2; overflow: hidden; }
.ui-prog > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold, #c89c12), var(--crimson, #97161a)); transition: width 1s var(--ui-ease); }
@media (prefers-reduced-motion: reduce) { .ui-rise, .admin-main { animation: none !important; opacity: 1 !important; } .sb-body, .sb-caret, .ui-prog > i { transition: none !important; } }

/* ---- chart cards ---- */
.ch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 1.1rem 0; }
.ch-card { background: #fff; border: 1px solid var(--line, #e8dcc8); border-radius: 18px; padding: 1rem 1.1rem 1.1rem; box-shadow: 0 14px 34px -26px rgba(151,22,26,.55); min-width: 0; }
.ch-card h3 { font-size: .86rem; font-weight: 800; color: var(--wine, #4a1a1c); margin: 0 0 .1rem; display: flex; align-items: center; gap: .4rem; }
.ch-card h3 i { color: var(--gold-deep, #8f6d08); }
.ch-card .ch-sub { font-size: .72rem; color: #8a7a6a; margin: 0 0 .7rem; }
.ch-box { position: relative; height: 230px; }
.ch-box.tall { height: 280px; }
.ch-empty { display: grid; place-items: center; height: 100%; color: #a39380; font-size: .85rem; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 0 0 1rem; }
.kpi { background: #fff; border: 1px solid var(--line, #e8dcc8); border-radius: 16px; padding: .85rem 1rem; position: relative; overflow: hidden; }
.kpi i.bi { position: absolute; right: .8rem; top: .8rem; font-size: 1.5rem; color: var(--gold, #c89c12); opacity: .35; }
.kpi b { display: block; font-size: 1.55rem; line-height: 1.1; color: var(--crimson, #97161a); font-variant-numeric: tabular-nums; }
.kpi span { font-size: .74rem; color: #7a6a5a; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.kpi small { display: block; font-size: .72rem; color: #8a7a6a; margin-top: .15rem; }
.kpi.good b { color: #1b7a43; } .kpi.warn b { color: #b8741a; } .kpi.bad b { color: #b3261e; }

/* ---- 360 profile ---- */
.pf-hero { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, #fff, #fff8ea); border: 1px solid var(--line, #e8dcc8); border-radius: 22px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; box-shadow: 0 18px 40px -30px rgba(151,22,26,.6); }
.pf-ava { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold-light, #ecc656); display: grid; place-items: center; background: var(--crimson, #97161a); color: #fff; font-size: 1.9rem; font-weight: 800; flex: 0 0 auto; }
.pf-id { flex: 1 1 260px; min-width: 0; }
.pf-id h1 { font-size: 1.45rem; margin: 0 0 .15rem; color: var(--wine, #4a1a1c); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pf-meta { display: flex; gap: .4rem .9rem; flex-wrap: wrap; font-size: .82rem; color: #6b5a4a; }
.pf-meta span { display: inline-flex; gap: .3rem; align-items: center; }
.pf-meta a { color: inherit; text-decoration: none; } .pf-meta a:hover { color: var(--crimson, #97161a); }
.pf-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.pf-chip { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .18rem .6rem; border-radius: 999px; background: var(--gold-tint, #fbf4dc); color: var(--gold-deep, #8f6d08); border: 1px solid var(--gold-light, #ecc656); }
.pf-chip.r { background: #fdecec; color: #b3261e; border-color: #f0b4b0; } .pf-chip.g { background: #e6f5ec; color: #1b7a43; border-color: #a9d9bb; } .pf-chip.b { background: #e8f0fb; color: #235ea8; border-color: #b4cdee; }
.pf-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.pf-tabs { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; margin-bottom: 1rem; padding-bottom: .15rem; border-bottom: 2px solid var(--line, #e8dcc8); }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tabs button { flex: 0 0 auto; border: 0; background: transparent; padding: .6rem .95rem; font-weight: 700; font-size: .86rem; color: #7a6a5a; border-radius: 12px 12px 0 0; position: relative; transition: color .2s, background .2s; cursor: pointer; }
.pf-tabs button:hover { color: var(--crimson, #97161a); background: rgba(200,156,18,.08); }
.pf-tabs button.on { color: var(--crimson, #97161a); }
.pf-tabs button.on::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -2px; height: 3px; border-radius: 3px; background: var(--crimson, #97161a); animation: uiFade .25s; }
.pf-tabs button .n { font-size: .68rem; background: var(--gold-tint, #fbf4dc); color: var(--gold-deep, #8f6d08); border-radius: 999px; padding: .02rem .4rem; margin-left: .3rem; }
.pf-pane { display: none; } .pf-pane.on { display: block; animation: uiRise .4s var(--ui-ease); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.pf-kv { display: grid; grid-template-columns: 38% 1fr; gap: .35rem .8rem; font-size: .86rem; margin: 0; }
.pf-kv dt { color: #8a7a6a; font-weight: 600; } .pf-kv dd { margin: 0; overflow-wrap: anywhere; }
.pf-tl { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--line, #e8dcc8); }
.pf-tl li { position: relative; padding: 0 0 .85rem .9rem; font-size: .84rem; }
.pf-tl li::before { content: ""; position: absolute; left: -1.5rem; top: .3rem; width: 11px; height: 11px; border-radius: 50%; background: var(--gold, #c89c12); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--gold-light, #ecc656); }
.pf-tl li time { display: block; font-size: .72rem; color: #8a7a6a; }
.pf-empty { text-align: center; color: #a39380; padding: 1.6rem 0; font-size: .9rem; }
.pf-tbl { width: 100%; font-size: .84rem; } .pf-tbl th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #8a7a6a; font-weight: 800; white-space: nowrap; }
.pf-search { display: flex; gap: .5rem; align-items: center; }
@media (max-width: 575.98px) { .pf-hero { padding: .9rem; } .pf-ava { width: 60px; height: 60px; font-size: 1.5rem; } .pf-kv { grid-template-columns: 1fr; gap: 0; } .pf-kv dt { margin-top: .5rem; } .ch-box { height: 200px; } }

[data-after-header] { display: none; } [data-after-header].ready { display: block; }