#app{--r-bg:light-dark(#f5f6f8,#171c24);--r-panel:light-dark(#fff,#202833);--r-fg:light-dark(#202b3b,#edf2f9);--r-sub:light-dark(#59677b,#b0bdce);--r-line:light-dark(#e0e5ec,#3b4757);--r-soft:light-dark(#eef1f5,#2c3745);--r-blue:light-dark(#3454a5,#c0d0ff);--r-bluebg:light-dark(#edf2ff,#2b3b5a);--r-amber:light-dark(#885315,#f2c68a);--r-amberbg:light-dark(#fff3df,#453626);--r-green:light-dark(#24684e,#9bd9be);--r-greenbg:light-dark(#edf6f0,#263f35);background:var(--r-bg);color:var(--r-fg);font:14px/1.5 system-ui,sans-serif;border:1px solid var(--r-line);border-radius:13px;overflow:hidden;--r-row:15px}
#app *{box-sizing:border-box}#app [hidden]{display:none!important}#app button,#app input,#app select{font:inherit;color:inherit}#app button{font-weight:500}#app button:focus-visible,#app select:focus-visible,#app input:focus-visible{outline:2px solid var(--r-blue);outline-offset:3px}#app h1{font-size:25px;line-height:1.25;letter-spacing:-.6px;font-weight:650;margin:4px 0 8px}#app h2{font-size:16px;font-weight:600;margin:0}#app h3{font-size:14px;font-weight:600;margin:0}#app p{margin:0}#app .r-small{font-size:12px}#app .r-sub{color:var(--r-sub)}#app .r-kicker{font-size:11px;letter-spacing:.9px;color:var(--r-sub);font-weight:600;text-transform:uppercase}#app .r-head{padding:18px 110px 18px 24px;display:flex;gap:11px;align-items:center;flex-wrap:wrap;background:var(--r-panel);border-bottom:1px solid var(--r-line)}#app .r-logo{width:31px;height:31px;border-radius:8px;display:grid;place-items:center;background:var(--r-fg);color:var(--r-panel);font-weight:650}#app .r-brand{font-size:18px;font-weight:650;letter-spacing:-.4px}#app .r-demo{padding:3px 7px;border-radius:5px;border:1px solid var(--r-line);font-size:11px;color:var(--r-sub)}#app .r-right{margin-left:auto}#app .r-main{padding:24px}#app .r-title{display:flex;gap:15px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:17px}#app .r-period{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--r-panel);border:1px solid var(--r-line);padding:11px 14px;border-radius:8px;margin-bottom:18px}#app select,#app input{background:var(--r-panel);border:1px solid var(--r-line);border-radius:6px;padding:7px 9px;min-width:0;max-width:100%}#app input{width:210px}#app .r-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:20px}#app .r-stat{background:var(--r-panel);border:1px solid var(--r-line);border-radius:9px;padding:15px}#app .r-value{font-size:27px;font-weight:600;letter-spacing:-.8px;margin:3px 0;font-variant-numeric:tabular-nums}#app .r-panel{background:var(--r-panel);border:1px solid var(--r-line);border-radius:10px}#app .r-panelhead{padding:16px 17px;border-bottom:1px solid var(--r-line);display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}#app .r-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 17px}#app .r-tabs{display:flex;gap:4px;flex-wrap:wrap}#app .r-tab{background:transparent;border:0;border-radius:6px;padding:7px 10px;color:var(--r-sub);font-size:12px}#app .r-tab[aria-pressed=true]{background:var(--r-bluebg);color:var(--r-blue);font-weight:600}#app .r-btn{background:var(--r-panel);border:1px solid var(--r-line);border-radius:6px;padding:7px 10px;font-size:12px}#app .r-btn:disabled{opacity:.4}#app .r-primary{background:var(--r-bluebg);color:var(--r-blue);border-color:var(--r-bluebg)}#app .r-link{padding:0;border:0;background:none;color:var(--r-blue);text-align:left}#app .r-link:hover{text-decoration:underline}#app .r-twrap{overflow-x:auto}#app table{border-collapse:collapse;width:100%;text-align:left;table-layout:fixed}#app th{background:var(--r-bg);color:var(--r-sub);font-size:11px;font-weight:500;padding:10px 13px;border-bottom:1px solid var(--r-line)}#app td{font-size:12px;padding:var(--r-row) 13px;border-bottom:1px solid var(--r-line);vertical-align:top;overflow-wrap:anywhere}#app tbody tr:last-child td{border-bottom:0}#app .r-person{display:flex;align-items:center;gap:8px}#app .r-avatar{width:31px;height:31px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;border:1px solid var(--r-line);background:var(--r-soft);color:var(--r-sub);font-size:11px;font-weight:600}#app .r-name{font-size:12px;font-weight:600}#app .r-count{font-weight:600;font-size:15px;display:inline-block;margin-bottom:4px;font-variant-numeric:tabular-nums}#app .r-badge{display:inline-block;padding:3px 6px;border-radius:5px;background:var(--r-soft);color:var(--r-sub);font-size:11px;margin:2px 3px 2px 0}#app .r-badge.warn{background:var(--r-amberbg);color:var(--r-amber)}#app .r-badge.good{background:var(--r-greenbg);color:var(--r-green)}#app .r-badge.blue{background:var(--r-bluebg);color:var(--r-blue)}#app .r-foot{border-top:1px solid var(--r-line);padding:11px 17px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--r-sub)}#app .r-pages{display:flex;align-items:center;gap:7px;flex-wrap:wrap}#app .r-note{font-size:12px;color:var(--r-sub);padding:12px 17px;border-top:1px solid var(--r-line)}#app .r-sourcefoot{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;color:var(--r-sub);font-size:11px}#app .r-profile{display:flex;gap:12px;align-items:center}#app .r-profile .r-avatar{width:44px;height:44px;font-size:14px}#app .r-back{margin-bottom:18px}#app .r-pad{padding:17px}#app .r-alert{background:var(--r-amberbg);color:var(--r-amber);padding:11px 14px;font-size:12px;border-radius:7px;margin-bottom:17px}#app .r-detail-tabs{margin-bottom:15px}#app .r-empty{padding:32px 18px;color:var(--r-sub);text-align:center}#app details{border-bottom:1px solid var(--r-line)}#app details:last-child{border:0}#app summary{padding:15px 17px;overflow-wrap:anywhere}#app .r-taskcontent{padding:0 17px 15px 32px}#app .r-taskmr{padding:9px 0;border-top:1px solid var(--r-line);display:flex;align-items:start;gap:10px;justify-content:space-between}#app .r-extra{padding:10px 0;margin-top:8px;border-top:1px solid var(--r-line);font-size:12px}#app .r-events{margin:0;padding:0;list-style:none}#app .r-events li{padding:13px 17px;border-bottom:1px solid var(--r-line);display:grid;grid-template-columns:100px 1fr;gap:12px;font-size:12px}#app .r-events li:last-child{border:0}#app .r-dot{width:6px;height:6px;background:var(--r-sub);border-radius:50%;display:inline-block;margin-right:5px}#app .r-inline{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
@media(max-width:760px){#app .r-main{padding:15px}#app .r-head{padding-left:15px}#app .r-stats{grid-template-columns:repeat(2,minmax(0,1fr))}#app table{min-width:720px}#app .r-tools input{width:100%}#app .r-title{align-items:flex-start}#app .r-period .r-right{margin-left:0;width:100%}#app .r-events li{grid-template-columns:1fr;gap:4px}#app .r-taskmr{flex-wrap:wrap}}
@media(pointer:coarse){#app button,#app input,#app select,#app summary{min-height:44px}#app input,#app select{font-size:16px}}
body{margin:0;padding:18px;background:light-dark(#eef1f5,#111720);font-family:system-ui,sans-serif;color-scheme:light dark}#app{max-width:1440px;margin:auto}#app .top-nav{margin-bottom:18px;gap:6px}#app .top-nav .r-tab{padding:10px 14px;font-size:13px;border:1px solid transparent}#app .top-nav .r-tab[aria-pressed=true]{border-color:var(--r-line);background:var(--r-panel);color:var(--r-blue)}#app .r-link{cursor:pointer}#app button,#app summary{cursor:pointer}#app button:disabled{cursor:default}#app .r-panel{overflow:hidden}#app .filter-label{font-size:11px;color:var(--r-sub)}#app .r-tools{gap:9px}#app .r-tools select{max-width:280px}#app .issue-chips{margin-top:7px;font-size:11px}#app .task-link{font-size:11px;margin-top:7px}#app .notes{font-size:12px;color:var(--r-sub);margin-top:17px}#app .notes p{margin:7px 0}#app .r-alert.error-banner{background:light-dark(#fce8e8,#492d2d);color:light-dark(#8e3636,#ffc5c5)}#app .detail-tabs{padding:12px 17px;border-bottom:1px solid var(--r-line)}#app .proposal-preview{margin:0;padding:12px 17px;border-bottom:1px solid var(--r-line);font-size:12px}#app .proposal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px 0}#app .mapping-select{width:100%;font-size:12px}#app .col-11{width:11%}#app .col-14{width:14%}#app .col-15{width:15%}#app .col-16{width:16%}#app .col-17{width:17%}#app .col-18{width:18%}#app .col-20{width:20%}#app .col-22{width:22%}#app .col-23{width:23%}#app .col-25{width:25%}#app .col-35{width:35%}#app .col-37{width:37%}#app .col-38{width:38%}#app .col-45{width:45%}#app .r-head{padding-right:26px}#app input[type=date]{font-size:12px}#app .r-small{font-size:12px}@media(max-width:760px){body{padding:0}#app{border-radius:0}#app .proposal-grid{grid-template-columns:1fr}#app .r-period input[type=date]{max-width:150px}#app .r-tools select{max-width:100%}#app .top-nav{gap:3px}#app .top-nav .r-tab{padding:8px 9px;font-size:12px}}

#app .confirm-row{margin-top:8px}

#app .role-choice{display:inline-flex;align-items:center;gap:7px;min-height:36px;cursor:pointer;font-size:12px}#app .role-choice input{width:17px;height:17px;margin:0;accent-color:var(--r-blue)}#app .member-roles{margin-top:5px}#app .col-12{width:12%}#app .col-24{width:24%}#app .col-28{width:28%}#app .role-filterbar{margin-top:-6px}#app .role-saved{vertical-align:middle}@media(pointer:coarse){#app .role-choice{min-height:44px}#app .role-choice input{min-height:0}}

#app .member-drag-handle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;min-height:44px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--r-sub);font-size:24px;cursor:grab;touch-action:none;user-select:none}
#app .member-drag-handle:hover,#app .member-drag-handle:focus-visible{background:var(--r-bluebg);color:var(--r-blue);border-color:var(--r-line)}
#app.member-dragging{user-select:none;cursor:grabbing}#app.member-dragging .member-drag-handle{cursor:grabbing}
#app .order-dragged{opacity:.45;background:var(--r-bluebg)}#app tr.order-before td{box-shadow:inset 0 3px var(--r-blue)}#app tr.order-after td{box-shadow:inset 0 -3px var(--r-blue)}
#app.order-saving .member-drag-handle{opacity:.4;cursor:wait;pointer-events:none}
@media(max-width:760px){#app .member-drag-handle+.r-avatar{display:none}}@media(pointer:coarse){#app .member-drag-handle{flex-basis:44px}}

#app .view-heading{margin-bottom:18px}#app .dashboard-footer{margin-top:24px}#app .dashboard-footer .r-stats{margin-bottom:0}
#app .member-role-section{border-top:1px solid var(--r-line)}#app .member-role-heading{display:flex;align-items:center;gap:10px;padding:13px 17px;background:var(--r-soft)}#app .member-role-heading h3{font-size:15px;font-weight:650;color:var(--r-blue)}#app .member-role-heading span{font-size:12px;color:var(--r-sub)}#app .section-empty{padding:18px;color:var(--r-sub);font-size:12px}

/* Actor-based daily activity view */
.activity-coverage{margin:0 24px 20px;padding:16px 20px;border:1px solid var(--line,#dce2e8);border-radius:12px;background:var(--surface,#f8fafc);font-size:13px;line-height:1.65}
.activity-coverage>div+div{margin-top:10px}.activity-coverage p{margin:4px 0 8px}.activity-coverage details{margin-top:10px}.activity-coverage summary{cursor:pointer;font-weight:600}.activity-warning{color:#a65c0a}.activity-tools{flex-wrap:wrap}.activity-table td{vertical-align:top}.activity-table th:first-child{width:25%}.activity-table th:last-child{width:23%}.activity-work+.activity-work{margin-top:14px;padding-top:12px;border-top:1px solid var(--line,#e2e8f0)}.activity-action{margin:4px 0}.activity-action time{font-size:12px;color:#64748b;margin-left:10px;white-space:nowrap}.activity-timeline{margin:20px 24px 24px;border:1px solid var(--line,#dce2e8);border-radius:12px;scroll-margin-top:12px}.activity-events{padding:0 24px;list-style:none}.activity-events li{display:flex;gap:20px;padding:14px 0;border-bottom:1px solid var(--line,#e2e8f0);line-height:1.6}.activity-events time{white-space:nowrap;min-width:100px;color:#64748b;font-size:12px}.activity-events li>div{min-width:0;overflow-wrap:anywhere}.activity-table td:nth-child(3){overflow-wrap:anywhere}.dashboard-footer[hidden]{display:none}
@media(max-width:800px){.activity-coverage{margin:0 12px 16px}.activity-table{min-width:850px}.activity-timeline{margin:12px}.activity-events li{display:block}.activity-tools input{max-width:100%}}

.activity-sync-status{display:flex;gap:10px 24px;flex-wrap:wrap}.activity-coverage details>div{margin-top:10px}

/* Collapsible roles and compact member activity */
#app .member-role-section{--r-row:9px}
#app .member-role-heading{padding:0}
#app .member-role-heading h3{width:100%}
#app .member-role-toggle{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;color:var(--r-blue);text-align:left;padding:10px 14px;font-size:14px;font-weight:650}
#app .member-role-toggle:hover{background:var(--r-bluebg)}
#app .member-role-toggle .role-chevron{color:var(--r-sub);display:inline-block;transition:transform .12s}
#app .member-role-toggle[aria-expanded=false] .role-chevron{transform:rotate(-90deg)}
#app .member-role-toggle .member-role-count{color:var(--r-sub);font-size:12px;font-weight:400}
#app .footer-mapping-notice{margin:16px 0 0}
#app .activity-view .r-panelhead{padding:10px 12px}
#app .activity-view .activity-tools{padding:8px 12px;gap:7px;font-size:12px}
#app .activity-view .activity-tools input,#app .activity-view .activity-tools select{padding:5px 7px}
#app .activity-sync-strip{padding:3px 12px 8px;font-size:11px;color:var(--r-sub);line-height:1.45}
#app .activity-sync-strip .activity-sync-status{gap:6px 20px}
#app .activity-table th{padding:7px 10px}
#app .activity-table td{padding:5px 10px;line-height:1.25}
#app .activity-table th:first-child{width:20%}
#app .activity-table th:last-child{width:19%}
#app .activity-table .r-person{gap:5px;align-items:flex-start}
#app .activity-table .member-drag-handle{min-height:32px;flex-basis:24px;font-size:20px}
#app .activity-person-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:2px}
#app .activity-table .r-badge{font-size:10px;padding:1px 4px;margin:0 2px 0 0}
#app .activity-work+.activity-work{margin-top:2px;padding-top:2px;border-top:1px solid var(--r-line)}
#app .activity-work-head{display:flex;gap:6px;min-width:0;align-items:baseline;white-space:nowrap}
#app .activity-work-head>a{overflow:hidden;text-overflow:ellipsis;max-width:55%;flex-shrink:0}
#app .activity-work-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#app .activity-work-meta{display:flex;gap:8px;align-items:baseline;white-space:nowrap;margin-top:0;font-size:11px;min-width:0}
#app .activity-work-meta .activity-action{margin:0;overflow:hidden;text-overflow:ellipsis;min-width:0}
#app .activity-work-meta time,#app .activity-work-meta>.r-sub,#app .activity-work-meta>button{flex-shrink:0}
#app .activity-work-meta time{color:var(--r-sub);font-variant-numeric:tabular-nums}
#app #activity-coverage-footer{margin-top:16px}
#app #activity-coverage-footer .activity-coverage{margin:0;padding:0 12px;background:var(--r-panel);border:1px solid var(--r-line);font-size:12px;color:var(--r-sub)}
#app #activity-coverage-footer details{margin:0}
#app #activity-coverage-footer summary{padding:10px 0;color:var(--r-fg)}
#app #activity-coverage-footer details[open]{padding-bottom:12px}
body.activity-modal-open{overflow:hidden}
#app .activity-dialog{width:90vw;max-width:none;max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--r-line);border-radius:12px;background:var(--r-panel);color:var(--r-fg);box-shadow:0 24px 80px #0005;overflow:hidden}
#app .activity-dialog[open]{display:flex;flex-direction:column}
#app .activity-dialog::backdrop{background:#10182788}
#app .activity-dialog>.r-panelhead,#app .activity-dialog>.r-tools,#app .activity-dialog>.r-foot{flex-shrink:0}
#app .activity-dialog .r-panelhead{padding:12px 16px}
#app .activity-dialog .r-panelhead p{font-size:12px;margin-top:3px}
#app .activity-dialog-body{overflow:auto;min-height:0;overscroll-behavior:contain}
#app .activity-dialog .activity-events{margin:0;padding:0 16px;font-size:12px}
#app .activity-dialog .activity-events li{gap:14px;padding:10px 0;border-color:var(--r-line)}
#app .activity-dialog .activity-events time{color:var(--r-sub)}
#app .activity-dialog .activity-events li:last-child{border:0}
#app .activity-dialog #activity-retry{margin-top:12px}
@media(pointer:coarse){#app .activity-table .member-drag-handle{min-height:44px;flex-basis:44px}#app .activity-work-meta{flex-wrap:wrap}}
@media(max-width:760px){#app .activity-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}#app .activity-dialog .activity-events li{display:block}#app .activity-dialog>.r-foot{padding:8px 12px}#app .activity-table{min-width:800px}}
@media(prefers-reduced-motion:reduce){#app .role-chevron{transition:none}}

#app .activity-table th:nth-child(2){width:13%}#app .activity-overview{line-height:1.55;white-space:nowrap}#app .activity-overview strong{color:var(--r-blue);font-variant-numeric:tabular-nums;font-weight:650}

/* Source-colored work links, keeping the compact row height. */
#app .activity-work-head>a{display:inline-block;padding:0 5px;border:1px solid var(--r-line);border-radius:5px;font-size:11px;line-height:1.15;text-decoration:none}
#app .activity-work-head>a.source-link--jira{color:light-dark(#2454a4,#b9d3ff);background:light-dark(#eef4ff,#253b5c);border-color:light-dark(#bad0f8,#45628a)}
#app .activity-work-head>a.source-link--gitlab{color:light-dark(#a2440b,#ffd0a1);background:light-dark(#fff1e6,#493323);border-color:light-dark(#f4c8a6,#82583b)}
#app .activity-work-head>a:hover{text-decoration:underline;border-color:currentColor}
#app .activity-work-head>a:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* Activity column separators: pair resizing keeps the table width stable. */
#app .activity-header-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#app .activity-table.columns-resizable th{position:relative;width:auto;padding-right:16px}
#app .activity-column-resizer{position:absolute;right:-6px;top:0;width:12px;height:100%;min-height:0;z-index:2;border:0;border-radius:0;padding:0;background:transparent;cursor:col-resize;touch-action:none}
#app .activity-column-resizer::after{content:"";position:absolute;left:5px;top:50%;height:17px;width:2px;transform:translateY(-50%);background:var(--r-line);border-radius:2px}
#app .activity-column-resizer:hover::after,#app .activity-column-resizer:focus-visible::after,#app .activity-column-resizer.column-resize-active::after{background:var(--r-blue);width:3px}
#app .activity-column-resizer:focus-visible{outline:2px solid var(--r-blue);outline-offset:-2px}
#app.activity-columns-resizing{user-select:none}
#app.activity-columns-resizing *{cursor:col-resize!important}
@media(pointer:coarse){#app .activity-column-resizer{width:20px;right:-10px}#app .activity-column-resizer::after{left:9px}#app .activity-table.columns-resizable th{height:44px}}

#app .activity-overview-count{display:block;line-height:1.55;white-space:nowrap}#app .activity-dialog .activity-work-head{white-space:normal;flex-wrap:wrap}

/* Keep the desktop workspace above the table to roughly 25–30% of a 720px viewport. */
#app .activity-layout{display:flex;gap:0}
#app .activity-layout .r-btn:first-child{border-radius:6px 0 0 6px}
#app .activity-layout .r-btn:last-child{border-radius:0 6px 6px 0}
#app .activity-layout .r-btn[aria-pressed=true]{background:var(--r-bluebg);color:var(--r-blue);border-color:var(--r-blue)}
body{padding:8px}
#app .r-head{padding:8px 16px;gap:8px}
#app .r-logo{width:28px;height:28px;border-radius:6px}
#app .r-brand{font-size:16px}
#app .r-head .r-btn{padding:4px 8px}
#app .r-main{padding:10px 16px 16px}
#app .top-nav{margin-bottom:8px;gap:4px}
#app .top-nav .r-tab{padding:6px 10px;font-size:12px}
#app #content>.r-panelhead{padding:6px 12px;gap:8px}
#app #content>.r-panelhead .r-btn{padding:4px 8px}
#app #content>.r-tools{padding:6px 12px;gap:6px 8px;font-size:12px}
#app #content>.r-tools input,#app #content>.r-tools select{padding:4px 7px}
#app .activity-tools #activity-date{width:140px}
#app .activity-tools #activity-search{width:180px}
#app .activity-sync-strip{padding:2px 12px 5px}
#app #member-graph+.activity-tools{border-top:1px solid var(--r-line)}
@media(max-width:760px){
  body{padding:0}
  #app .r-head{padding:8px 10px}
  #app .r-main{padding:8px}
  #app .top-nav{flex-wrap:nowrap;overflow-x:auto}
  #app .top-nav .r-tab{flex-shrink:0;white-space:nowrap}
}

/* Direct, restrained feedback for dashboard controls. Gesture-driven graph movement
   remains owned by React Flow; these transitions never gate input. */
#app .r-head {
  background: light-dark(#fffffff0, #202833f0);
  backdrop-filter: blur(18px) saturate(135%);
}
#app button:not(:disabled) {
  transition:
    transform 120ms ease-out,
    box-shadow 160ms ease-out,
    border-color 160ms ease-out,
    background-color 160ms ease-out;
}
#app button:not(:disabled):active {
  transform: scale(0.97);
}
#app .activity-dialog {
  background: light-dark(#fffffff5, #202833f5);
  backdrop-filter: blur(24px) saturate(140%);
}
#app .activity-dialog::backdrop {
  backdrop-filter: blur(2px);
}
@media (prefers-reduced-transparency: reduce) {
  #app .r-head,
  #app .activity-dialog {
    background: var(--r-panel);
    backdrop-filter: none;
  }
  #app .activity-dialog::backdrop { backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  #app .r-panel,
  #app .activity-dialog { border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  #app *,
  #app *::before,
  #app *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Activity workspace: compact operational view. */
#app[data-view]{--r-bg:light-dark(#f5f5f2,#16191d);--r-panel:light-dark(#fff,#1d2127);--r-fg:light-dark(#272b33,#edf0f4);--r-sub:light-dark(#626a77,#a8b1bf);--r-line:light-dark(#e8e9e5,#333943);--activity-accent:light-dark(#bd432f,#ff9a85)}
#app[data-view="activity"] .r-head{background:var(--r-panel);border-bottom:1px solid var(--r-line)}
#app[data-view="activity"] .r-logo{background:#dd634b;color:#fff;border-radius:9px}
#app[data-view] .r-main{background:var(--r-bg);padding:8px 16px}
#app[data-view] .top-nav{border-bottom:1px solid var(--r-line);margin:0 0 8px;gap:4px}
#app[data-view] .top-nav .r-tab{border:0;border-radius:0;padding:8px 10px;color:var(--r-sub)}
#app[data-view] .top-nav .r-tab[aria-pressed="true"]{background:transparent;color:var(--r-fg);box-shadow:inset 0 -2px var(--activity-accent)}
#app[data-view="activity"] .activity-view{border:0;border-radius:0;background:var(--r-panel)}
#app .activity-view>.r-panelhead{background:var(--r-bg);border:0;padding:9px 12px}
#app .activity-view>.r-panelhead h2{font-size:23px;letter-spacing:-.6px;font-weight:650}
#app .activity-view #activity-sync{background:var(--r-fg);color:var(--r-panel);border-color:var(--r-fg)}
#app .activity-view .activity-tools{border-top:1px solid var(--r-line);border-bottom:1px solid var(--r-line);padding:8px 12px}
#app .activity-table th{background:var(--r-bg);font-size:11px;text-transform:none;padding:8px 10px}
#app .activity-table td{vertical-align:middle;padding:9px 10px}
#app .activity-table tbody tr:hover{background:light-dark(#f7f8fa,#242b35)}
#app .activity-table .r-person{align-items:center;gap:8px}
#app .activity-avatar{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;background:light-dark(#edf3fb,#25354b);color:light-dark(#275ca4,#9bc5ff);font-size:11px;font-weight:600}
#app .activity-person-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
#app .activity-person-meta .r-badge.blue{background:transparent;color:var(--r-sub);border-left:1px solid var(--r-line);border-radius:0;padding-left:5px}
#app .activity-overview-count{padding:2px 4px;text-decoration:none;color:light-dark(#a34c15,#efb27e)}
#app .activity-overview-count[data-activity-scope="jira"]{color:light-dark(#275ca4,#9bc5ff)}
#app .activity-overview-count strong{color:inherit}
#app .activity-work+.activity-work{border:0;margin-top:5px;padding-top:0}
#app .activity-work-head{align-items:center}
#app .activity-work-title{color:var(--r-fg)}
#app .activity-work-meta{color:var(--r-sub)}
#app .activity-work-meta .activity-action{color:light-dark(#28725d,#8ecfb7)}
#app .activity-dialog{border-radius:11px}
#app[data-view="activity"] .activity-sync-strip{background:var(--r-panel);padding:4px 12px 7px}
@media(max-width:760px){#app[data-view="activity"] .r-main{padding:8px}#app .activity-view>.r-panelhead h2{font-size:20px}}

/* Approved activity layout: narrow navigation rail and compact work rows. */
#app[data-view]{position:relative;box-sizing:border-box;width:100%;max-width:none;min-height:calc(100dvh - 16px);padding-left:58px}
#app[data-view]::before{content:"";position:absolute;inset:0 auto 0 0;width:58px;background:#252a32;border-radius:10px 0 0 10px}
#app[data-view] .r-head{min-height:48px}
#app[data-view] .top-nav{position:absolute;left:0;top:58px;width:58px;display:flex;flex-direction:column;align-items:center;overflow:visible;border:0;margin:0;gap:7px;z-index:1}
#app[data-view] .top-nav .r-tab{width:40px;height:40px;padding:0;border:0;border-radius:7px;font-size:0;color:#b7c1ce;display:grid;place-items:center;position:relative}
#app[data-view] .top-nav .r-tab::before{font-size:18px;line-height:1}
#app[data-view] .top-nav [data-view="team"]::before{content:"▤"}
#app[data-view] .top-nav [data-view="activity"]::before{content:"▦"}
#app[data-view] .top-nav [data-view="jira"]::before{content:"J";font-weight:700}
#app[data-view] .top-nav [data-view="gitlab"]::before{content:"G";font-weight:700}
#app[data-view] .top-nav [data-view="report"]::before{content:"▥"}
#app[data-view] .top-nav [data-view="roles"]::before{content:"♙"}
#app[data-view] .top-nav [data-view="mapping"]::before{content:"⇄"}
#app[data-view] .top-nav .r-tab:hover,#app[data-view] .top-nav .r-tab:focus-visible{background:#39414e;color:#fff}
#app[data-view] .top-nav .r-tab[aria-pressed="true"]{background:#39414e;color:#fff;box-shadow:inset 3px 0 #e77c66}
#app[data-view="activity"] .activity-work{display:flex;align-items:center;gap:8px;min-width:0}
#app[data-view="activity"] .activity-work-head{flex:1;min-width:0}
#app[data-view="activity"] .activity-work-head>a{max-width:52%}
#app[data-view="activity"] .activity-work-meta{flex:0 1 auto;max-width:55%;gap:6px}
#app[data-view="activity"] .activity-work-meta .activity-action{max-width:130px}
#app[data-view="activity"] .activity-work-meta>span.r-sub{display:none}
@media(max-width:760px){#app[data-view]{padding-left:48px;min-height:100dvh}#app[data-view]::before{width:48px;border-radius:0}#app[data-view] .top-nav{width:48px}#app[data-view] .top-nav .r-tab{width:40px;height:44px}#app[data-view] .activity-work-meta{max-width:none}}
#app .activity-date-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--r-sub)}
#app .activity-date-label input{width:140px}
#app .activity-role-tabs{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-right:auto}
#app .activity-role-tabs button{border:0;border-radius:5px;background:transparent;color:var(--r-sub);padding:5px 8px;font-size:12px;white-space:nowrap}
#app .activity-role-tabs button:hover{background:var(--r-soft)}
#app .activity-role-tabs button[aria-pressed="true"]{background:light-dark(#fcf0ec,#3a2725);color:var(--activity-accent);font-weight:600}
#app .activity-role-tabs button span{font-variant-numeric:tabular-nums;font-size:11px}
#app .activity-role-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;min-width:44px;cursor:pointer}
#app .activity-role-tabs button:focus-visible{outline:2px solid var(--r-blue);outline-offset:2px}
#app .activity-role-icon{width:18px;height:18px;display:inline-block;vertical-align:middle;flex-shrink:0;stroke-linecap:round;stroke-linejoin:round}
#app .activity-role-tag{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;background:var(--r-soft);color:var(--r-sub)}
#app .activity-role-tag .activity-role-icon{width:15px;height:15px}
@media(pointer:coarse){#app .activity-role-tabs button{min-height:44px}}
#app .activity-view>.activity-sync-strip{border-top:1px solid var(--r-line);padding:10px 12px;background:var(--r-bg)}
@media(max-width:760px){#app .activity-role-tabs{width:100%}#app .activity-date-label{flex-wrap:wrap}}

/* Match the approved activity mockup: tabs below the title and source icons. */
#app[data-view="activity"] .activity-view>.activity-layout{display:flex;gap:20px;padding:0 12px;background:var(--r-bg);border-bottom:1px solid var(--r-line)}
#app[data-view="activity"] .activity-layout .r-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 1px 10px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--r-sub);font-weight:500}
#app[data-view="activity"] .activity-layout .r-btn[aria-pressed="true"]{background:transparent;color:var(--r-fg);border-bottom-color:var(--activity-accent);font-weight:600}
#app .activity-icon{width:16px;height:16px;flex:none;vertical-align:middle}
#app .activity-overview-count{display:flex;align-items:center;gap:5px}
#app .activity-overview-count .activity-icon{width:14px;height:14px;margin-left:3px}
#app .activity-work-head>a{display:inline-flex;align-items:center;gap:5px;line-height:1.4;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
#app .activity-work-head>a .activity-icon{width:13px;height:13px}
#app[data-view] .top-nav .r-tab::before{content:"";width:19px;height:19px;background:currentColor;mask:var(--nav-icon) center/contain no-repeat;-webkit-mask:var(--nav-icon) center/contain no-repeat}
#app[data-view] .top-nav [data-view="team"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v14H4zM4%209h16M8%2013h8%22%2F%3E%3C%2Fsvg%3E") }
#app[data-view] .top-nav [data-view="activity"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18M9%204v16%22%2F%3E%3C%2Fsvg%3E") }
#app[data-view] .top-nav [data-view="jira"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v4a3%203%200%200%200%200%206v4H4v-4a3%203%200%200%200%200-6z%22%2F%3E%3C%2Fsvg%3E") }
#app[data-view] .top-nav [data-view="gitlab"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%224%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M6%206v12M18%2018v-5a5%205%200%200%200-5-5H8%22%2F%3E%3C%2Fsvg%3E") }
#app[data-view] .top-nav [data-view="report"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019V9M10%2019V5M16%2019v-7M22%2019H2%22%2F%3E%3C%2Fsvg%3E") }
#app[data-view] .top-nav [data-view="roles"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020v-2a6%206%200%200%201%2012%200v2M16%205a3%203%200%200%201%200%206m2%203a5%205%200%200%201%203%205v1%22%2F%3E%3C%2Fsvg%3E") }
#app[data-view] .top-nav [data-view="mapping"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207H3v4M3%207h14a4%204%200%200%201%204%204M17%2017h4v-4m0%204H7a4%204%200%200%201-4-4%22%2F%3E%3C%2Fsvg%3E") }

/* Giữ nhãn cùng bộ lọc và gom thao tác để không xuống dòng rời rạc. */
#app[data-view="activity"] .activity-view>.activity-tools{display:flex;align-items:center;gap:10px 12px;padding:10px 12px;border-top:0}
#app[data-view="activity"] .activity-tools>.activity-layout{display:flex;align-items:center;gap:14px;flex:none;padding:0 10px 0 0;border-right:1px solid var(--r-line);background:transparent}
#app[data-view="activity"] .activity-tools .activity-layout .r-btn{padding:6px 1px;border-bottom:2px solid transparent}
#app[data-view="activity"] .activity-tools .activity-layout .r-btn[aria-pressed="true"]{border-bottom-color:var(--activity-accent)}
#app[data-view="activity"] .activity-role-tabs{margin-right:0;flex:none;max-width:100%}
#app .activity-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;flex:1 1 480px;min-width:0}
#app .activity-select{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
#app .activity-filters #activity-search{flex:1 1 160px;width:auto}
#app .activity-header-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex:1 1 480px;min-width:0}
#app[data-view="activity"] .activity-tools .activity-date-label{margin-left:auto}
@media(max-width:760px){
  #app[data-view="activity"] .activity-tools>.activity-layout{border-right:0}
  #app[data-view="activity"] .activity-role-tabs{flex:1 1 100%;width:100%;flex-wrap:nowrap;overflow-x:auto;padding:3px 0}
  #app .activity-role-tabs button{flex:none}
  #app .activity-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex-basis:100%;align-items:end}
  #app .activity-filters #activity-search{grid-column:1 / -1;width:100%}
  #app .activity-filters .activity-select{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  #app .activity-filters select{width:100%}
  #app[data-view="activity"] .activity-tools .activity-date-label{margin-left:0;flex:1 1 100%}
  #app .activity-header-actions{flex-basis:100%}
  #app .activity-header-actions #activity-reset-columns:disabled{display:none}
}

.history-dialog,.report-dialog { width:min(1100px,94vw); max-height:90vh; overflow:auto; border:1px solid var(--r-line); border-radius:14px; padding:20px; color:var(--r-fg); background:var(--r-panel); }
.history-dialog::backdrop,.report-dialog::backdrop { background:rgb(0 0 0 / .35); }
.history-dialog form { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.history-dialog li,.report-evidence-list li { margin:12px 0; padding:10px; border-bottom:1px solid var(--r-line); overflow-wrap:anywhere; }
.report-evidence-list pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:380px; overflow:auto; font:inherit; }
.report-coverage-note { display:block; color:var(--r-sub); }
.member-period-report { min-width:900px; }
.sync-progress-summary { margin:12px 0; padding:12px; border:1px solid var(--r-line); border-radius:8px; background:var(--r-panel); font-size:12px; }
.sync-progress-summary progress { display:block; width:100%; height:16px; margin:8px 0; accent-color:var(--r-blue); }
.sync-result-counts { display:flex; flex-wrap:wrap; gap:8px 20px; margin:8px 0; }
.sync-result-counts [data-sync-result="success"] { color:var(--r-green); }
.sync-result-counts [data-sync-result="partial"] { color:var(--r-amber); }
.sync-result-counts [data-sync-result="failed"] { color:light-dark(#a02b2b,#ffaaaa); }

/* Brand mark: Tabler topology-star; see docs/reference/third-party-notices.md. */
#app .r-logo,#app[data-view="activity"] .r-logo{background:#0284c7;color:#fff}
#app .r-logo svg{width:22px;height:22px;display:block}

/* Shared operational workspace across all views. */
#app[data-view] .top-nav [data-view="schedule"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%203v4M17%203v4M3%2010h18M12%2013v3l2%201%22%2F%3E%3C%2Fsvg%3E")}
#app[data-view] .view-heading{margin:8px 0 12px}
#app[data-view] .view-heading h1{font-size:23px;margin:0 0 3px}
#app[data-view] #content:not(.activity-view){border:0;border-radius:0;background:var(--r-panel)}
#app[data-view] #content:not(.activity-view) .r-panelhead{padding:12px 14px;background:var(--r-panel)}
#app[data-view] #content:not(.activity-view) .r-tools{padding:9px 14px;border-bottom:1px solid var(--r-line)}
#app[data-view] #content:not(.activity-view) th{padding:8px 12px;background:var(--r-bg);font-size:11px}
#app[data-view] #content:not(.activity-view) td{padding:10px 12px;vertical-align:middle}
#app[data-view] #content:not(.activity-view) tbody tr:hover{background:light-dark(#f7f8fa,#242b35)}
#app[data-view] .member-role-heading{padding:8px 14px;background:var(--r-bg)}
#app[data-view] .member-role-heading h3{color:var(--r-fg)}
#app[data-view] .r-foot{padding:9px 14px;background:var(--r-panel)}
#app[data-view] .r-btn{border-color:var(--r-line)}
#app[data-view] .r-btn:hover:not(:disabled){background:var(--r-soft)}
#app[data-view] .r-primary{background:var(--r-fg);border-color:var(--r-fg);color:var(--r-panel)}
#app[data-view] .r-primary:hover:not(:disabled){opacity:.88;background:var(--r-fg)}
#app[data-view] .source-link{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border:1px solid;border-radius:5px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-decoration:none;line-height:1.4}
#app[data-view] .source-link--jira{color:light-dark(#24569f,#a8c8ff);background:light-dark(#edf3ff,#25354b);border-color:light-dark(#b7cff5,#45618a)}
#app[data-view] .source-link--gitlab{color:light-dark(#a64b12,#ffbb85);background:light-dark(#fff2e9,#4b3024);border-color:light-dark(#f0c4a7,#86593e)}
#app[data-view] .source-link:hover{text-decoration:underline}
#app[data-view] .mapping-draft-status{color:var(--r-sub);font-size:12px}
#app[data-view="report"] .report-heading{padding:14px 16px}
#app[data-view="report"] .report-period-controls{padding:10px 16px}
#app[data-view="report"] .report-filterbar{padding:12px 16px;gap:10px}
#app[data-view="report"] .report-actionbar{padding:0 16px 10px}
#app[data-view="report"] .member-period-report-view>.pulse-notice{margin:0 16px 10px}
#app[data-view="report"] .member-period-report td{padding:10px 12px}
#app[data-view="schedule"] #content{background:transparent}
#app[data-view="schedule"] .schedule-heading{margin-bottom:12px}
#app[data-view="schedule"] .schedule-grid{gap:12px;margin-bottom:14px}
#app[data-view="schedule"] .schedule-card>header{padding:16px 16px 0}
#app[data-view="schedule"] #schedule-form,#app[data-view="schedule"] .schedule-next-body{padding:16px}
#app[data-view="schedule"] .schedule-filters{padding:12px 16px}
#app[data-view="schedule"] .schedule-history td,#app[data-view="schedule"] .schedule-history th{padding:10px 12px}
@media(max-width:760px){#app[data-view] .r-main{padding:8px}#app[data-view] .r-head{padding:8px 12px}#app[data-view="report"] .report-filterbar{grid-template-columns:1fr 1fr}#app[data-view="schedule"] .schedule-history td{padding:0}#app[data-view] .view-heading h1{font-size:20px}}

/* The expanded navigation floats over the workspace; the rail allocation stays fixed. */
#app[data-view] .top-nav{top:0;bottom:0;box-sizing:border-box;padding-top:58px;align-items:flex-start;gap:7px;background:transparent;overflow:hidden;transition:width .16s ease,background-color .16s ease,box-shadow .16s ease}
#app[data-view] .top-nav .r-tab{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex:0 0 40px;width:40px;margin-left:9px;padding:0 10px;white-space:nowrap;overflow:hidden;text-align:left}
#app[data-view] .top-nav .r-tab::before{flex:0 0 19px}
#app[data-view] .top-nav .r-tab::after{content:attr(aria-label);font-size:13px;line-height:1.3;opacity:0;white-space:nowrap}
#app[data-view] .top-nav:has(.r-tab:focus-visible){width:min(232px,calc(100vw - 16px));background:#252a32;box-shadow:8px 0 20px rgb(0 0 0 / .18);z-index:10}
#app[data-view] .top-nav:has(.r-tab:focus-visible) .r-tab{width:calc(100% - 18px)}
#app[data-view] .top-nav:has(.r-tab:focus-visible) .r-tab::after{opacity:1}
@media(hover:hover){
  #app[data-view] .top-nav:hover{width:min(232px,calc(100vw - 16px));background:#252a32;box-shadow:8px 0 20px rgb(0 0 0 / .18);z-index:10}
  #app[data-view] .top-nav:hover .r-tab{width:calc(100% - 18px)}
  #app[data-view] .top-nav:hover .r-tab::after{opacity:1}
}
@media(max-width:760px){#app[data-view] .top-nav .r-tab{margin-left:4px;flex-basis:44px}#app[data-view] .top-nav:has(.r-tab:focus-visible) .r-tab{width:calc(100% - 8px)}}
@media(max-width:760px) and (hover:hover){#app[data-view] .top-nav:hover .r-tab{width:calc(100% - 8px)}}
@media(prefers-reduced-motion:reduce){#app[data-view] .top-nav{transition:none}}

/* App identity and account actions live in the overlay navigation. */
#app[data-view] .top-nav{height:min(100%,calc(100dvh - 36px));bottom:auto;padding:0 0 8px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#687382 transparent}
#app[data-view] .sidebar-brand{display:flex;align-items:center;gap:12px;flex:0 0 64px;width:100%;padding:0 13px;border-bottom:1px solid #ffffff24;color:#fff;overflow:hidden}
#app[data-view] .sidebar-brand .r-logo{width:32px;height:32px;flex:0 0 32px;border-radius:8px}
#app[data-view] .sidebar-brand-label,#app[data-view] .sidebar-account-label{display:none;min-width:0;white-space:nowrap;text-align:left}
#app[data-view] .sidebar-brand-label strong{display:block;font-size:15px;font-weight:650}
#app[data-view] .sidebar-brand-label span,#app[data-view] .sidebar-account-label small{display:block;font-size:11px;color:#c3ccd8}
#app[data-view] .sidebar-actions{width:100%;margin-top:auto;padding:8px 9px 0;border-top:1px solid #ffffff24}
#app[data-view] .sidebar-action,#app[data-view] .sidebar-account summary{display:flex;align-items:center;gap:12px;width:40px;min-height:40px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#c4d2df;white-space:nowrap;overflow:hidden;text-align:left}
#app[data-view] .sidebar-action svg,#app[data-view] .sidebar-avatar svg{width:19px;height:19px;flex:none}
#app[data-view] .sidebar-action span{display:none;font-size:13px}
#app[data-view] .sidebar-action:hover,#app[data-view] .sidebar-account summary:hover{background:#39414e;color:#fff}
#app[data-view] .sidebar-account{border:0;margin:3px 0 0}
#app[data-view] .sidebar-account summary{list-style:none;cursor:pointer}
#app[data-view] .sidebar-account summary::-webkit-details-marker{display:none}
#app[data-view] .sidebar-avatar{display:grid;place-items:center;flex:0 0 19px}
#app[data-view] .sidebar-account-label strong{display:block;color:#fff;font-size:13px;font-weight:600}
#app[data-view] .sidebar-account .auth-controls{display:grid;justify-content:stretch;width:100%;gap:3px;padding:4px;border:1px solid #ffffff30;border-radius:8px;background:#303844}
#app[data-view] .sidebar-account .auth-controls .r-btn{width:100%;min-height:36px;padding:6px 10px;text-align:left;background:transparent;border:0;color:#f0f3f7}
#app[data-view] .sidebar-account .auth-controls .r-btn:hover{background:#4b5664}
#app[data-view] .sidebar-account .auth-account-error{color:#ffc1b9;white-space:normal;padding:5px}
#app[data-view] .top-nav:has(:focus-visible),#app[data-view] .top-nav:has(.sidebar-account[open]){width:min(232px,calc(100vw - 16px));background:#252a32;box-shadow:8px 0 20px rgb(0 0 0 / .18);z-index:10}
#app[data-view] .top-nav:has(:focus-visible) .r-tab,#app[data-view] .top-nav:has(.sidebar-account[open]) .r-tab{width:calc(100% - 18px)}
#app[data-view] .top-nav:has(:focus-visible) .r-tab::after,#app[data-view] .top-nav:has(.sidebar-account[open]) .r-tab::after{opacity:1}
#app[data-view] .top-nav:has(:focus-visible) :is(.sidebar-brand-label,.sidebar-account-label,.sidebar-action span),#app[data-view] .top-nav:has(.sidebar-account[open]) :is(.sidebar-brand-label,.sidebar-account-label,.sidebar-action span){display:block}
#app[data-view] .top-nav:has(:focus-visible) :is(.sidebar-action,.sidebar-account summary),#app[data-view] .top-nav:has(.sidebar-account[open]) :is(.sidebar-action,.sidebar-account summary){width:100%}
@media(hover:hover){
 #app[data-view] .top-nav:hover :is(.sidebar-brand-label,.sidebar-account-label,.sidebar-action span){display:block}
 #app[data-view] .top-nav:hover :is(.sidebar-action,.sidebar-account summary){width:100%}
}
@media(max-width:760px){
 #app[data-view] .top-nav{height:min(100%,100dvh)}
 #app[data-view] .sidebar-brand{padding:0 8px}
 #app[data-view] .sidebar-actions{padding-inline:4px}
 #app[data-view] .sidebar-action,#app[data-view] .sidebar-account summary{min-height:44px}
 #app[data-view] .top-nav:has(:focus-visible) .r-tab,#app[data-view] .top-nav:has(.sidebar-account[open]) .r-tab{width:calc(100% - 8px)}
}
/* Menu cố định khớp khung toàn chiều ngang, lề body 8px và viền 1px. */
#app[data-view] .top-nav{position:fixed;top:9px;left:9px;height:calc(100dvh - 18px)}
@media(max-width:760px){#app[data-view] .top-nav{top:1px;left:1px;height:calc(100dvh - 2px)}}
#app[data-view] .sidebar-actions{position:relative}
#app[data-view] .sidebar-account .auth-controls{position:absolute;bottom:48px;left:9px;width:calc(100% - 18px);z-index:1;box-shadow:0 8px 20px rgb(0 0 0 / .2)}
@media(max-width:760px){#app[data-view] .sidebar-account .auth-controls{left:4px;width:calc(100% - 8px)}}