/* =========================================================
   POWER BI PRACTICE WORKSPACE  —  the look of Power BI Desktop
   ---------------------------------------------------------
   Everything is under #pbiWorkspace / .pbi-* so the site's stylesheet and
   this one never meet. Colours are Power BI's own: the Fluent greys
   (#F3F2F1 chrome, #E1DFDD rules, #605E5C secondary text, #252423 text),
   #0078D4 for the active mark, #F2C811 for the logo, #EAEAEA for the canvas.
   Nothing here uses text-transform or letter-spacing: the site's global
   reset kills both.
   ========================================================= */

.pbi-scroll{ overflow:auto; -webkit-overflow-scrolling:touch; border-radius:6px; }
#pbiWorkspace{ min-width:1000px; }
#pbiWorkspace, #pbiWorkspace *{ box-sizing:border-box; }
#pbiWorkspace svg{ display:inline-block; vertical-align:middle; flex:none; }
#pbiWorkspace button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; }
#pbiWorkspace input{ font:inherit; }

.pbi-ws{
  position:relative; display:flex; flex-direction:column; height:640px; min-width:1000px;
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size:12px; line-height:1.3; color:#252423;
  background:#fff; border:1px solid #C8C6C4; border-radius:6px; overflow:hidden; user-select:none;
}
.pbi-ws.pbi-locked .pbi-ribbon, .pbi-ws.pbi-locked .pbi-body, .pbi-ws.pbi-locked .pbi-formula-wrap{ pointer-events:none; }
.pbi-ws.pbi-locked .pbi-body{ opacity:.92; }

/* ------------------------------------------------------------ title bar */
.pbi-titlebar{ display:flex; align-items:center; gap:10px; height:32px; padding:0 8px 0 10px; background:#F3F2F1; border-bottom:1px solid #E1DFDD; flex:none; }
.pbi-tb-logo{ display:inline-flex; }
.pbi-tb-qa{ display:inline-flex; align-items:center; gap:8px; color:#605E5C; }
.pbi-tb-sep{ width:1px; height:14px; background:#C8C6C4; }
.pbi-tb-glyph{ font-size:13px; line-height:1; }
.pbi-tb-title{ flex:1; text-align:center; color:#252423; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pbi-tb-search{ display:inline-flex; align-items:center; gap:6px; width:180px; height:22px; padding:0 8px; background:#fff; border:1px solid #C8C6C4; border-radius:3px; color:#605E5C; font-size:11px; }
.pbi-tb-win{ display:inline-flex; gap:16px; color:#605E5C; font-size:11px; padding-left:6px; }

/* --------------------------------------------------------------- ribbon */
.pbi-ribbon{ flex:none; background:#fff; border-bottom:1px solid #E1DFDD; }
.pbi-rtabs{ display:flex; align-items:flex-end; height:26px; padding:0 8px; background:#F3F2F1; gap:2px; }
.pbi-rtab{ padding:4px 10px 5px; font-size:12px; color:#323130; cursor:pointer; border-bottom:2px solid transparent; }
.pbi-rtab:hover{ background:#EDEBE9; }
.pbi-rtab.on{ color:#0078D4; border-bottom-color:#0078D4; background:#fff; }
.pbi-rbody{ display:flex; align-items:stretch; height:70px; padding:2px 6px 0; overflow:hidden; }
.pbi-rb-group{ display:flex; flex-direction:column; justify-content:space-between; padding:0 6px; border-right:1px solid #E1DFDD; }
.pbi-rb-group:last-child{ border-right:0; }
.pbi-rb-items{ display:flex; align-items:flex-start; gap:2px; }
.pbi-rb-name{ font-size:10px; color:#605E5C; text-align:center; padding:0 2px 3px; white-space:nowrap; }
.pbi-rb-big{ display:flex; flex-direction:column; align-items:center; width:58px; min-height:50px; padding:3px 2px 2px; border-radius:3px; color:#323130; }
.pbi-rb-big svg{ color:#0078D4; }
.pbi-rb-big span{ font-size:10px; line-height:1.15; text-align:center; margin-top:3px; }
.pbi-rb-big:hover{ background:#EDEBE9; }
.pbi-rb-big.dim{ color:#8A8886; cursor:default; }
.pbi-rb-big.dim svg{ color:#A19F9D; }
.pbi-rb-big.dim:hover{ background:#F3F2F1; }
.pbi-rb-stack{ display:flex; flex-direction:column; gap:1px; }
.pbi-rb-small{ display:flex; align-items:center; gap:5px; height:16px; padding:0 4px; font-size:10px; color:#8A8886; border-radius:2px; cursor:default; }
.pbi-rb-small svg{ color:#A19F9D; }
.pbi-rb-file{ display:flex; align-items:center; gap:8px; padding:8px 4px; color:#605E5C; font-size:11px; }

/* ---------------------------------------------------------- formula bar */
.pbi-formula-wrap{ flex:none; }
.pbi-formula{ display:flex; align-items:center; height:30px; padding:0 8px 0 6px; gap:4px; background:#fff; border-bottom:1px solid #E1DFDD; }
.pbi-fx-btn{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:3px; color:#605E5C; }
.pbi-fx-btn:hover{ background:#EDEBE9; color:#252423; }
.pbi-fx-n{ width:18px; text-align:center; color:#8A8886; font-size:11px; border-right:1px solid #E1DFDD; margin:0 6px 0 4px; }
.pbi-fx-input{ flex:1; height:24px; border:1px solid transparent; border-radius:2px; padding:0 6px; font-family:Consolas, "Cascadia Mono", Menlo, monospace; font-size:12.5px; color:#252423; background:#fff; outline:none; }
.pbi-fx-input:focus{ border-color:#0078D4; }
.pbi-fx-error{ display:flex; align-items:center; gap:6px; padding:3px 12px 4px 42px; background:#FDE7E9; color:#A4262C; font-size:11px; border-bottom:1px solid #E1DFDD; }

/* ----------------------------------------------------------------- body */
.pbi-body{ flex:1; display:flex; min-height:0; }
.pbi-rail{ width:44px; flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:8px; background:#F3F2F1; border-right:1px solid #E1DFDD; }
.pbi-rail-btn{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:3px; color:#605E5C; position:relative; }
.pbi-rail-btn:hover{ background:#EDEBE9; }
.pbi-rail-btn.on{ color:#0078D4; background:#fff; }
.pbi-rail-btn.on::before{ content:""; position:absolute; left:-6px; top:8px; bottom:8px; width:3px; background:#0078D4; border-radius:2px; }

.pbi-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.pbi-canvas{ flex:1; position:relative; background:#EAEAEA; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden; }
.pbi-page{ position:relative; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18); outline:none; }
.pbi-pagetabs{ height:28px; flex:none; display:flex; align-items:flex-end; gap:2px; padding:0 8px; background:#F3F2F1; border-top:1px solid #E1DFDD; }
.pbi-pagetab{ padding:4px 12px; font-size:11px; color:#605E5C; background:#E1DFDD; border-radius:3px 3px 0 0; }
.pbi-pagetab.on{ background:#fff; color:#252423; border:1px solid #E1DFDD; border-bottom:0; }
.pbi-pageadd{ padding:4px 8px; color:#605E5C; font-size:13px; }

/* ------------------------------------------------------------- visuals */
.pbi-visual{ position:absolute; background:#fff; border:1px solid transparent; border-radius:2px; padding:6px; overflow:hidden; display:flex; flex-direction:column; cursor:move; }
.pbi-visual:hover{ border-color:#C8C6C4; }
.pbi-visual.on{ border-color:#605E5C; }
.pbi-visual.pbi-over{ outline:2px solid #0078D4; outline-offset:-2px; }
.pbi-visual-title{ font-size:11px; color:#252423; font-weight:600; height:20px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; }
.pbi-visual-body{ flex:1; min-height:0; position:relative; overflow:hidden; }
.pbi-handle{ position:absolute; width:7px; height:7px; background:#fff; border:1px solid #605E5C; z-index:2; }
.pbi-h-nw{ left:-1px; top:-1px; cursor:nwse-resize; } .pbi-h-n{ left:calc(50% - 3px); top:-1px; cursor:ns-resize; } .pbi-h-ne{ right:-1px; top:-1px; cursor:nesw-resize; }
.pbi-h-e{ right:-1px; top:calc(50% - 3px); cursor:ew-resize; } .pbi-h-se{ right:-1px; bottom:-1px; cursor:nwse-resize; } .pbi-h-s{ left:calc(50% - 3px); bottom:-1px; cursor:ns-resize; }
.pbi-h-sw{ left:-1px; bottom:-1px; cursor:nesw-resize; } .pbi-h-w{ left:-1px; top:calc(50% - 3px); cursor:ew-resize; }

.pbi-empty{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; color:#605E5C; font-size:11px; padding:6px; }
.pbi-empty-ico{ color:#C8C6C4; }
.pbi-chart{ display:block; }
.pbi-grid{ stroke:#E1DFDD; stroke-width:1; }
.pbi-axis{ stroke:#C8C6C4; stroke-width:1; }
.pbi-ax, .pbi-lg{ font-size:9px; fill:#605E5C; font-family:inherit; }
.pbi-pl{ font-size:9px; fill:#fff; font-family:inherit; }
.pbi-vis-err{ position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:4px; font-size:10px; color:#A4262C; z-index:1; }
.pbi-err{ color:#A4262C; }

.pbi-card{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.pbi-card-val{ font-weight:400; color:#252423; line-height:1.1; white-space:nowrap; }
.pbi-card-label{ font-size:11px; color:#605E5C; margin-top:4px; }

.pbi-tbl-wrap{ height:100%; overflow:auto; }
.pbi-tbl{ border-collapse:collapse; width:100%; font-size:11px; }
.pbi-tbl th, .pbi-tbl td{ padding:3px 6px; text-align:left; border-bottom:1px solid #E1DFDD; white-space:nowrap; }
.pbi-tbl th{ font-weight:600; border-bottom:1px solid #605E5C; position:sticky; top:0; background:#fff; }
.pbi-tbl th.pbi-num, .pbi-tbl td.pbi-num{ text-align:right; }
.pbi-tbl tfoot td{ font-weight:600; border-top:1px solid #605E5C; border-bottom:0; }
.pbi-mx .pbi-mx-row{ font-weight:600; }
.pbi-mx th.pbi-mx-corner{ text-align:left; }

.pbi-slicer{ height:100%; display:flex; flex-direction:column; }
.pbi-slicer-head{ display:flex; align-items:center; gap:4px; font-size:12px; padding:0 2px 4px; border-bottom:1px solid #E1DFDD; }
.pbi-slicer-head > span:first-child{ flex:1; font-weight:400; }
.pbi-slicer-clear{ color:#605E5C; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:2px; }
.pbi-slicer-clear:hover{ background:#EDEBE9; }
.pbi-slicer-dd{ color:#605E5C; display:inline-flex; }
.pbi-slicer-list{ flex:1; overflow:auto; padding-top:4px; }
.pbi-slicer-item{ display:flex; align-items:center; gap:6px; padding:3px 2px; font-size:11px; cursor:pointer; border-radius:2px; }
.pbi-slicer-item:hover{ background:#F3F2F1; }
.pbi-slicer-box{ width:12px; height:12px; border:1px solid #605E5C; border-radius:2px; background:#fff; flex:none; position:relative; }
.pbi-slicer-item.on .pbi-slicer-box{ background:#0078D4; border-color:#0078D4; }
.pbi-slicer-item.on .pbi-slicer-box::after{ content:""; position:absolute; left:3px; top:1px; width:4px; height:7px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }

/* ---------------------------------------------------------------- panes */
.pbi-filters, .pbi-viz, .pbi-data{ flex:none; background:#fff; border-left:1px solid #E1DFDD; display:flex; flex-direction:column; min-height:0; }
.pbi-viz{ width:260px; }
.pbi-data{ width:220px; }
.pbi-filters{ width:36px; }
.pbi-filters.open{ width:220px; }
.pbi-pane-head{ display:flex; align-items:center; justify-content:space-between; height:34px; padding:0 10px; font-size:13px; font-weight:600; color:#252423; flex:none; }
.pbi-pane-x{ color:#605E5C; display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border-radius:2px; }
.pbi-pane-x:hover{ background:#EDEBE9; }
.pbi-search{ display:flex; align-items:center; gap:6px; margin:0 10px 8px; height:26px; padding:0 8px; border:1px solid #C8C6C4; border-radius:2px; color:#605E5C; font-size:11px; flex:none; }
.pbi-search-live input{ flex:1; border:0; outline:none; background:transparent; font-size:11px; color:#252423; min-width:0; }
.pbi-search-live:focus-within{ border-color:#0078D4; }

.pbi-filters-strip{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:10px; color:#605E5C; }
.pbi-filters-strip:hover{ background:#F3F2F1; }
.pbi-filters-vtext{ writing-mode:vertical-rl; font-size:12px; font-weight:600; color:#252423; }
.pbi-filters-pane{ display:flex; flex-direction:column; height:100%; overflow:auto; }
.pbi-fsec{ font-size:11px; font-weight:600; color:#605E5C; padding:6px 10px 4px; }
.pbi-fcard{ margin:0 10px 6px; padding:6px 8px; border:1px solid #E1DFDD; border-radius:3px; background:#F8F8F8; }
.pbi-fcard-name{ font-size:11px; font-weight:600; }
.pbi-fcard-val{ font-size:11px; color:#605E5C; }
.pbi-fdrop{ margin:0 10px 8px; padding:8px; border:1px dashed #8A8886; border-radius:3px; color:#605E5C; font-size:11px; text-align:center; }

.pbi-viz-tabs{ display:flex; gap:4px; padding:0 10px 6px; flex:none; }
.pbi-viz-tab{ width:30px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:3px; color:#605E5C; border-bottom:2px solid transparent; }
.pbi-viz-tab:hover{ background:#EDEBE9; }
.pbi-viz-tab.on{ color:#0078D4; border-bottom-color:#0078D4; }
.pbi-viz-sub{ font-size:12px; font-weight:600; padding:0 10px 6px; flex:none; }
.pbi-gallery{ display:grid; grid-template-columns:repeat(7, 30px); gap:3px; padding:0 10px 8px; flex:none; }
.pbi-gal{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:3px; color:#605E5C; }
.pbi-gal:hover{ background:#EDEBE9; border-color:#C8C6C4; }
.pbi-gal.on{ background:#C7E0F4; border-color:#0078D4; color:#004578; }
.pbi-gal.dim{ opacity:.45; }
.pbi-wells{ flex:1; overflow:auto; padding:0 10px 10px; border-top:1px solid #E1DFDD; }
.pbi-well{ padding-top:8px; }
.pbi-well-label{ font-size:11px; font-weight:600; color:#252423; margin-bottom:4px; }
.pbi-well-drop{ min-height:30px; border:1px dashed #8A8886; border-radius:3px; padding:3px; display:flex; flex-direction:column; gap:3px; }
.pbi-well-drop.filled{ border-style:solid; border-color:#E1DFDD; }
.pbi-well-drop.pbi-over, .pbi-dragging .pbi-well-drop{ border-color:#0078D4; }
.pbi-well-drop.pbi-over{ background:#EFF6FC; }
.pbi-well-hint{ font-size:11px; color:#605E5C; padding:3px 6px; }
.pbi-chip{ display:flex; align-items:center; height:24px; padding:0 2px 0 8px; background:#F3F2F1; border:1px solid #C8C6C4; border-radius:2px; font-size:11px; cursor:grab; }
.pbi-chip-txt{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pbi-chip-dd, .pbi-chip-x{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:2px; color:#605E5C; }
.pbi-chip-dd:hover, .pbi-chip-x:hover{ background:#E1DFDD; color:#252423; }
.pbi-fmt-tabs{ display:flex; gap:12px; padding:0 10px 6px; font-size:11px; color:#605E5C; }
.pbi-fmt-tabs .on{ color:#0078D4; border-bottom:2px solid #0078D4; }
.pbi-fmt-row{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-top:1px solid #F3F2F1; font-size:11px; color:#605E5C; }
.pbi-fmt-row span:nth-child(2){ flex:1; color:#252423; }
.pbi-toggle{ width:28px; height:14px; border:1px solid #8A8886; border-radius:8px; position:relative; }
.pbi-toggle span{ position:absolute; left:2px; top:2px; width:8px; height:8px; border-radius:50%; background:#8A8886; }
.pbi-fmt-note{ padding:0 10px; font-size:11px; color:#605E5C; }

/* Callout value and Data colors, the two Format sections that actually do
   something — see formatPaneHTML in pbi-workspace.js. */
.pbi-fmt-row.pbi-fmt-real{ cursor:pointer; }
.pbi-fmt-row.pbi-fmt-real:hover{ background:#F3F2F1; }
.pbi-fmt-body{ padding:2px 10px 10px 28px; border-top:1px solid #F3F2F1; }
.pbi-fmt-field{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; color:#252423; padding:4px 0; }
.pbi-fmt-num{ width:52px; font-size:11px; padding:3px 5px; border:1px solid #8A8886; border-radius:2px; color:#252423; }
.pbi-fmt-colors{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 4px; }
.pbi-fmt-swatch{ width:18px; height:18px; border-radius:3px; border:1px solid #C8C6C4; padding:0; cursor:pointer; }
.pbi-fmt-swatch.on{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #0078D4; }
.pbi-fmt-auto{ background:#fff; color:#605E5C; display:inline-flex; align-items:center; justify-content:center; }

.pbi-fields{ flex:1; overflow:auto; padding:0 6px 10px; }
.pbi-tbl-row{ display:flex; align-items:center; gap:5px; height:26px; padding:0 4px; font-size:12px; font-weight:600; cursor:pointer; border-radius:2px; }
.pbi-tbl-row:hover{ background:#F3F2F1; }
.pbi-field{ display:flex; align-items:center; gap:5px; height:26px; padding:0 4px 0 16px; font-size:12px; cursor:grab; border-radius:2px; }
.pbi-field:hover{ background:#F3F2F1; }
.pbi-field input{ width:13px; height:13px; margin:0; accent-color:#0078D4; cursor:pointer; flex:none; }
.pbi-fi{ width:13px; height:13px; color:#605E5C; flex:none; }
.pbi-fi-blank{ display:inline-block; }
.pbi-fi-m{ color:#0078D4; }
.pbi-field-name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pbi-field-more{ width:20px; height:20px; display:none; align-items:center; justify-content:center; border-radius:2px; color:#605E5C; }
.pbi-field:hover .pbi-field-more, .pbi-field-m .pbi-field-more{ display:inline-flex; }
.pbi-field-more:hover{ background:#E1DFDD; }
.pbi-fields-none{ padding:6px 16px; font-size:11px; color:#605E5C; }

/* ---------------------------------------------------------- other views */
.pbi-dataview{ flex:1; display:flex; flex-direction:column; min-height:0; background:#fff; }
.pbi-dv-bar{ display:flex; align-items:center; justify-content:space-between; height:30px; padding:0 12px; border-bottom:1px solid #E1DFDD; font-size:12px; font-weight:600; }
.pbi-dv-bar span{ display:inline-flex; align-items:center; gap:6px; }
.pbi-dv-note{ font-weight:400; color:#605E5C; font-size:11px; }
.pbi-dv-wrap{ flex:1; }
.pbi-dv th{ background:#F3F2F1; }
.pbi-modelview{ flex:1; padding:24px; background:#FAFAFA; background-image:radial-gradient(#D6D4D2 1px, transparent 1px); background-size:16px 16px; }
.pbi-model-card{ width:200px; background:#fff; border:1px solid #C8C6C4; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.12); overflow:hidden; }
.pbi-model-head{ display:flex; align-items:center; gap:6px; padding:6px 10px; background:#F3F2F1; border-bottom:1px solid #E1DFDD; font-weight:600; }
.pbi-model-field{ display:flex; align-items:center; gap:6px; padding:3px 10px; font-size:11px; }
.pbi-model-note{ margin-top:14px; font-size:11px; color:#605E5C; }

/* ------------------------------------------------------------- status */
.pbi-status{ height:22px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:#F3F2F1; border-top:1px solid #E1DFDD; font-size:11px; color:#605E5C; }
.pbi-status-note{ color:#0078D4; }

/* --------------------------------------------------------------- menus */
.pbi-menu{ position:absolute; z-index:20; min-width:180px; background:#fff; border:1px solid #C8C6C4; border-radius:3px; box-shadow:0 4px 12px rgba(0,0,0,.16); padding:4px 0; }
.pbi-menu-item{ display:flex; align-items:center; gap:8px; width:100%; height:28px; padding:0 10px; font-size:12px; text-align:left; color:#252423; }
.pbi-menu-item:hover{ background:#F3F2F1; }
.pbi-menu-item.on{ font-weight:600; }
.pbi-menu-gap{ width:12px; display:inline-block; }
.pbi-menu-sep{ height:1px; background:#E1DFDD; margin:4px 0; }

@media (max-width:820px){
  .pbi-ws{ height:560px; }
}