/* Account shell: main pages in a top bar, the open page's sections in a left menu (text, icons or hidden), the
   page's search and filters in a right column. brand.css forces transparent buttons, underlines, square corners and a
   yellow focus with !important rules up to specificity (1,2,1), so every rule here sits under
   body.brand-page.account-page.account-top plus an id. This file places things; account-ui.css (linked after it) styles
   page headers, the filter panel and its fields, and work.css refines #workPanel. The --sh-* names are aliases of the
   kit's --ui-* tokens (UI-KIT 2.2), so a palette change is made once. */
body.account-top{--sh-ink:var(--ui-ink);--sh-text:var(--ui-text);--sh-muted:var(--ui-muted);--sh-faint:var(--ui-faint);--sh-line:var(--ui-line);--sh-field:var(--ui-line-strong);--sh-input:var(--ui-line-strong);--sh-subtle:var(--ui-subtle);--sh-hover:var(--ui-hover);--sh-accent:var(--ui-accent);--sh-accent-soft:var(--ui-accent-soft);--sh-accent-line:var(--ui-accent-line);--sh-font:var(--ui-font);--sh-head:72px;--sh-stick:136px}
body.account-top.account-signed-in .account-main.brand-shell{max-width:none;padding:var(--sh-head) 24px 48px;overflow-x:clip}
/* The page heading leaves the screen but stays the page's h1 for screen readers. */
body.account-top.account-signed-in .account-heading{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
body.account-top button{text-decoration:none!important}
/* Site bar on the account page: the "Contul meu" marker sits on the bar's bottom edge (brand.css:510 pushes it 8px
   lower), and the bar uses the account bar's 24px gutter, so the logo lines up with the menu toggle at every width
   (.account-main is min(1440px,100%) wide with 24px padding). */
body.brand-page.account-page.account-top .site-nav>a[aria-current="page"]::after{bottom:0}
body.account-top.account-signed-in .sitebar-in{width:min(1392px,calc(100% - 48px));max-width:none}

/* Top bar: a tab per main page (the tab look of the kit: muted, ink on hover with a grey rule, current ink 600 with a
   2px accent rule), menu and filter toggles, the account. Never shown on the login screen. */
body.account-top:not(.account-signed-in) #accountTopbar{display:none!important}
body.brand-page.account-page.account-top #accountTopbar{display:flex;align-items:center;gap:8px;min-height:48px;margin:0 -24px;padding:0 24px;background:#fff;box-shadow:inset 0 -1px var(--sh-line);color:var(--sh-text);font:14px/20px var(--sh-font)}
body.brand-page.account-page.account-top #accountTopbar .account-pages{display:flex;align-self:stretch;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
body.brand-page.account-page.account-top #accountTopbar .account-pages::-webkit-scrollbar{display:none}
body.brand-page.account-page.account-top #accountTopbar .account-pages>button{--sh-fg:var(--ui-muted);--sh-rule:transparent;display:inline-flex;align-items:center;gap:8px;flex:none;margin:0;padding:0 12px;border:0!important;border-radius:0!important;background:transparent!important;color:var(--sh-fg)!important;box-shadow:inset 0 -2px var(--sh-rule)!important;font:500 14px/20px var(--sh-font)!important;text-decoration:none!important;white-space:nowrap;cursor:pointer}
body.brand-page.account-page.account-top #accountTopbar .account-pages>button:hover{--sh-fg:var(--ui-ink);--sh-rule:var(--ui-line-strong)}
body.brand-page.account-page.account-top #accountTopbar .account-pages>button[aria-current=page]{--sh-fg:var(--ui-ink);--sh-rule:var(--ui-accent);font-weight:600!important}
/* The group badge (sum of the group's menu chips) is the shell's only filled chip. */
body.brand-page.account-page.account-top #accountTopbar .shell-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--sh-accent);color:#fff;font:600 12px/20px var(--sh-font);font-variant-numeric:tabular-nums}
body.brand-page.account-page.account-top #accountTopbar .shell-toggle{--sh-bg:transparent;--sh-fg:var(--sh-muted);--sh-edge:transparent;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:32px;height:32px;margin:0;padding:0 6px;border:1px solid var(--sh-edge)!important;border-radius:6px!important;background:var(--sh-bg)!important;color:var(--sh-fg)!important;box-shadow:none!important;font:500 13px/18px var(--sh-font)!important;text-decoration:none!important;cursor:pointer}
body.brand-page.account-page.account-top #accountTopbar .shell-toggle:hover{--sh-bg:var(--sh-hover);--sh-fg:var(--sh-ink)}
body.brand-page.account-page.account-top #accountTopbar .shell-filters{--sh-fg:var(--sh-text);--sh-edge:var(--sh-line);padding:0 10px}
body.brand-page.account-page.account-top #accountTopbar .shell-filters[aria-pressed=true]{--sh-bg:var(--sh-accent-soft);--sh-fg:var(--sh-accent);--sh-edge:var(--sh-accent-line)}
body.brand-page.account-page.account-top #accountTopbar .shell-filters[aria-pressed=true]:hover{--sh-edge:var(--sh-accent)}
body.brand-page.account-page.account-top #accountTopbar .account-identity{display:flex;align-items:center;gap:8px;flex:none;min-width:0;margin:0 0 0 4px!important;padding:0 0 0 12px!important;border:0!important;border-left:1px solid var(--sh-line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--sh-text)!important;font:13px/16px var(--sh-font)!important}
body.brand-page.account-page.account-top #accountTopbar .account-identity p{display:grid;min-width:0;margin:0}
body.brand-page.account-page.account-top #accountTopbar #identityEmail{overflow:hidden;max-width:220px;color:var(--sh-ink);font-weight:500;text-overflow:ellipsis;white-space:nowrap}
body.brand-page.account-page.account-top #accountTopbar #identityRole{display:block;margin:0;color:var(--sh-muted);font-size:12px}
body.brand-page.account-page.account-top #accountTopbar .shell-avatar{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;margin:0;border-radius:50%;background:var(--sh-accent-soft);color:var(--sh-accent);font:600 12px/1 var(--sh-font)}
body.brand-page.account-page.account-top #accountTopbar .shell-avatar:empty{display:none}
body.brand-page.account-page.account-top #accountTopbar #logout{--sh-bg:transparent;--sh-fg:var(--sh-text);display:inline-flex;align-items:center;flex:none;height:32px;min-height:0;margin:0;padding:0 10px;border:0!important;border-radius:6px!important;background:var(--sh-bg)!important;color:var(--sh-fg)!important;box-shadow:none!important;font:500 13px/18px var(--sh-font)!important;text-decoration:none!important;white-space:nowrap;cursor:pointer}
body.brand-page.account-page.account-top #accountTopbar #logout:hover{--sh-bg:var(--sh-hover);--sh-fg:var(--sh-ink)}
body.brand-page.account-page.account-top #accountTopbar #logout:disabled{opacity:.6;cursor:progress}
body.brand-page.account-page.account-top #accountTopbar button:focus-visible{outline:2px solid var(--sh-accent)!important;outline-offset:-2px!important;background:var(--sh-bg,transparent)!important;color:var(--sh-fg,var(--sh-text))!important;box-shadow:inset 0 -2px var(--sh-rule,transparent)!important;text-decoration:none!important}

/* Left menu: the open page's sections. Current one: accent text on a soft accent background. */
body.brand-page.account-page.account-top.shell-menu-hidden #dashboard .account-sidebar{display:none}
body.brand-page.account-page.account-top #dashboard .account-sidebar{margin:0;padding:0;border:0;background:none}
body.brand-page.account-page.account-top #dashboard .account-navigation{margin:0;padding:0;border:0;border-radius:0;background:none}
body.brand-page.account-page.account-top #dashboard .account-tabs{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;border:0;border-radius:0;background:none!important}
body.brand-page.account-page.account-top #dashboard .account-nav-group{display:none}
body.brand-page.account-page.account-top #dashboard .account-nav-group.active{display:flex;flex-direction:column;gap:2px}
body.brand-page.account-page.account-top #dashboard .account-nav-group>p{display:none}
body.brand-page.account-page.account-top #dashboard .account-tabs button{--sh-bg:transparent;--sh-fg:var(--sh-text);--sh-icon:var(--sh-muted);position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:36px;margin:0;padding:8px 12px;border:0!important;border-radius:6px!important;background:var(--sh-bg)!important;color:var(--sh-fg)!important;box-shadow:none!important;font:500 14px/20px var(--sh-font)!important;text-align:left;text-decoration:none!important;white-space:normal;cursor:pointer;transition:background-color .15s,color .15s}
body.brand-page.account-page.account-top #dashboard .account-tabs button:hover{--sh-bg:var(--sh-hover);--sh-fg:var(--sh-ink);--sh-icon:var(--sh-text)}
body.brand-page.account-page.account-top #dashboard .account-tabs button[aria-current=page]{--sh-bg:var(--sh-accent-soft);--sh-fg:var(--sh-accent);--sh-icon:var(--sh-accent);font-weight:600!important}
body.brand-page.account-page.account-top #dashboard .account-tabs .shell-icon{display:inline-flex;flex:none;color:var(--sh-icon)}
body.brand-page.account-page.account-top #dashboard .account-tabs .shell-label{flex:1;min-width:0}
/* Menu chips: one neutral style (Lucru's count chip) for every count; zero is hidden; white with accent text on the
   current row. The emphasis is the group badge in the top bar. */
body.brand-page.account-page.account-top #dashboard .account-tabs :is(.menu-count,.notification-badge){display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:20px;height:20px;margin:0;padding:0 6px;border:0;border-radius:999px!important;background:var(--ui-hover)!important;color:var(--ui-text-2)!important;font:500 12px/20px var(--sh-font)!important;font-variant-numeric:tabular-nums;white-space:nowrap}
body.brand-page.account-page.account-top #dashboard .account-tabs :is(.menu-count,.notification-badge)[data-empty=true]{display:none}
body.brand-page.account-page.account-top #dashboard .account-tabs [aria-current=page] :is(.menu-count,.notification-badge){background:#fff!important;color:var(--sh-accent)!important}
body.brand-page.account-page.account-top #dashboard .shell-mode{--sh-bg:transparent;--sh-fg:var(--sh-muted);display:flex;align-items:center;gap:8px;width:100%;min-height:32px;margin:12px 0 0;padding:8px 12px;border:0!important;border-top:1px solid var(--sh-line)!important;border-radius:0!important;background:var(--sh-bg)!important;color:var(--sh-fg)!important;box-shadow:none!important;font:500 13px/18px var(--sh-font)!important;text-align:left;text-decoration:none!important;cursor:pointer}
body.brand-page.account-page.account-top #dashboard .shell-mode:hover{--sh-fg:var(--sh-ink)}
body.brand-page.account-page.account-top #dashboard :is(.account-tabs button,.shell-mode,.account-navigation>summary):focus-visible{outline:2px solid var(--sh-accent)!important;outline-offset:-2px!important;background:var(--sh-bg,transparent)!important;color:var(--sh-fg,var(--sh-ink))!important;box-shadow:none!important;text-decoration:none!important}

/* Right column: the page's search and filters, a direct child of the open page. Only its placement and visibility come
   from here; account-ui.css styles the panel (.ui-filters, and the legacy containers) and work.css Lucru's. */
body.brand-page.account-page.account-top.shell-filters-hidden #dashboard .account-content>section>:is(.control-toolbar,.board-toolbar,#caseFilterPanel,.ui-filters){display:none!important}

/* Wide screens: sticky top bar; menu 232px (56px icons), content, filters 280px. */
@media(min-width:901px){
 body.brand-page.account-page.account-top #accountTopbar{position:sticky;top:var(--sh-head);z-index:20}
 body.brand-page.account-page.account-top #dashboard.account-layout{grid-template-columns:232px minmax(0,1fr);gap:24px;align-items:start;margin-top:24px;transition:grid-template-columns .15s}
 body.brand-page.account-page.account-top.shell-icons #dashboard.account-layout{grid-template-columns:56px minmax(0,1fr)}
 body.brand-page.account-page.account-top.shell-menu-hidden #dashboard.account-layout{grid-template-columns:minmax(0,1fr)}
 body.brand-page.account-page.account-top #dashboard .account-sidebar{position:sticky;top:var(--sh-stick);max-height:calc(100dvh - var(--sh-stick) - 16px);overflow:auto;scrollbar-width:thin}
 body.brand-page.account-page.account-top.shell-icons #dashboard .account-tabs button{justify-content:center;gap:0;min-height:40px;padding:8px 0}
 body.brand-page.account-page.account-top.shell-icons #dashboard .account-tabs :is(.menu-count,.notification-badge){position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px!important;font-size:10px!important;line-height:16px!important}
 body.brand-page.account-page.account-top.shell-icons #dashboard .shell-mode{position:relative;justify-content:center;padding:8px 0}
 body.brand-page.account-page.account-top.shell-icons #dashboard :is(.account-tabs,.shell-mode) .shell-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 /* Icon mode: the label shows as a dark tooltip on hover and on keyboard focus. The sidebar lets it overflow and sits
    above the content's sticky headers and bars (z-index 2 and 5), under the top bar (20). */
 body.brand-page.account-page.account-top.shell-icons #dashboard .account-sidebar{z-index:6;overflow:visible}
 body.brand-page.account-page.account-top.shell-icons #dashboard :is(.account-tabs button,.shell-mode):is(:hover,:focus-visible) .shell-label{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);width:auto;height:auto;overflow:visible;clip-path:none;padding:4px 8px;border-radius:6px;background:var(--ui-ink);color:#fff;font:500 12px/16px var(--ui-font);white-space:nowrap;z-index:30;pointer-events:none;box-shadow:var(--ui-shadow-menu)}
 @supports selector(:has(*)){
  body.brand-page.account-page.account-top:not(.shell-filters-hidden) #dashboard .account-content>section:has(>.control-toolbar:not([hidden]),>.board-toolbar:not([hidden]),>#caseFilterPanel:not([hidden]),>.ui-filters:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) 280px;column-gap:24px;align-items:start}
  body.brand-page.account-page.account-top #dashboard :where(.account-content>section)>*{grid-column:1;min-width:0}
  body.brand-page.account-page.account-top:not(.shell-filters-hidden) #dashboard .account-content>section>:is(.control-toolbar,.board-toolbar,#caseFilterPanel,.ui-filters){grid-column:2;grid-row:1/span 40;position:sticky;top:var(--sh-stick);max-height:calc(100dvh - var(--sh-stick) - 16px);overflow:auto;margin:0}
 }
}
/* A board needs the whole width for its five columns, so the alerts board and Lucru's Tablou keep their filters above
   the columns at every width (an id in the selector outranks the grid rules above). */
@media(min-width:901px){
 @supports selector(:has(*)){
  body.brand-page.account-page.account-top:not(.shell-filters-hidden) #dashboard .account-content>section:is(#boardPanel,#workPanel:has(.w-board)):has(>.control-toolbar:not([hidden]),>.board-toolbar:not([hidden]),>.ui-filters:not([hidden])){display:block}
  body.brand-page.account-page.account-top:not(.shell-filters-hidden) #dashboard .account-content>section:is(#boardPanel,#workPanel:has(.w-board))>:is(.control-toolbar,.board-toolbar,.ui-filters){position:static;max-height:none;overflow:visible;margin:0 0 16px}
 }
}
/* Below 1280px the side column would leave a list about 400px wide, so every page keeps its filters above the list
   there (the selectors of the grid rules above, same specificity, later in the file). */
@media(min-width:901px) and (max-width:1279px){
 body.brand-page.account-page.account-top:not(.shell-filters-hidden) #dashboard .account-content>section:has(>.control-toolbar:not([hidden]),>.board-toolbar:not([hidden]),>#caseFilterPanel:not([hidden]),>.ui-filters:not([hidden])){display:block}
 body.brand-page.account-page.account-top:not(.shell-filters-hidden) #dashboard .account-content>section>:is(.control-toolbar,.board-toolbar,#caseFilterPanel,.ui-filters){position:static;max-height:none;overflow:visible;margin:0 0 16px}
}
@media(min-width:901px) and (max-width:1199px){
 body.brand-page.account-page.account-top #accountTopbar .account-pages>button{padding:0 10px}
 body.brand-page.account-page.account-top #accountTopbar .account-identity p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Phones and tablets: one column. Top bar with the account on its own row, the menu as a disclosure ("Parcurge
   panoul", so the site's hamburger is the only one), the filters above the content. */
@media(max-width:900px){
 body.account-top.account-signed-in .account-main.brand-shell{padding:var(--sh-head) 16px 40px}
 body.account-top.account-signed-in .sitebar-in{width:calc(100% - 32px)}
 body.brand-page.account-page.account-top #accountTopbar{flex-wrap:wrap;margin:0 -16px;padding:0 16px}
 body.brand-page.account-page.account-top #accountTopbar #shellMenu{display:none}
 body.brand-page.account-page.account-top #accountTopbar .account-pages{flex:1 1 200px;height:48px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
 body.brand-page.account-page.account-top #accountTopbar .account-identity{flex:1 1 100%;margin:0 -16px!important;padding:8px 16px!important;border-left:0!important;border-top:1px solid var(--sh-line)!important}
 body.brand-page.account-page.account-top #accountTopbar .account-identity p{flex:1}
 body.brand-page.account-page.account-top #accountTopbar #identityEmail{max-width:none}
 body.brand-page.account-page.account-top #dashboard.account-layout{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px}
 body.brand-page.account-page.account-top.shell-menu-hidden #dashboard .account-sidebar{display:block}
 body.brand-page.account-page.account-top #dashboard .account-sidebar{position:static;max-height:none;overflow:visible}
 body.brand-page.account-page.account-top #dashboard .account-navigation{padding:0 12px;border:1px solid var(--sh-line);border-radius:8px;background:#fff}
 body.brand-page.account-page.account-top #dashboard .account-navigation>summary{display:flex;align-items:center;gap:8px;min-height:44px;margin:0 -12px;padding:0 12px;border-radius:8px!important;color:var(--sh-muted);font:400 13px/18px var(--sh-font);list-style:none;cursor:pointer}
 body.brand-page.account-page.account-top #dashboard .account-navigation>summary::-webkit-details-marker{display:none}
 body.brand-page.account-page.account-top #dashboard .account-navigation>summary strong{flex:1;min-width:0;color:var(--sh-ink);font:600 14px/20px var(--sh-font);text-align:right}
 body.brand-page.account-page.account-top #dashboard .account-navigation>summary strong::after{color:var(--sh-muted)}
 body.brand-page.account-page.account-top #dashboard .account-navigation[open]>summary{border-radius:8px 8px 0 0!important;box-shadow:inset 0 -1px var(--sh-line)}
 body.brand-page.account-page.account-top #dashboard .account-nav-group.active{padding:8px 0}
 body.brand-page.account-page.account-top #dashboard .account-tabs button{min-height:44px}
 body.brand-page.account-page.account-top #dashboard .shell-mode{display:none}
 body.brand-page.account-page.account-top #dashboard .account-content>section>:is(.control-toolbar,.board-toolbar,#caseFilterPanel,.ui-filters){margin:0 0 16px}
}
/* Forced colours drop the underline shadow and the fills: underline the current page and section instead; chips and the
   icon-mode tooltip keep a system-colour border. */
@media(forced-colors:active){
 body.brand-page.account-page.account-top :is(#accountTopbar .account-pages>button,#dashboard .account-tabs button)[aria-current=page]{text-decoration:underline 2px!important;text-underline-offset:4px}
 body.brand-page.account-page.account-top :is(#accountTopbar .shell-badge,#dashboard .account-tabs .menu-count,#dashboard .account-tabs .notification-badge){border:1px solid CanvasText!important}
 body.brand-page.account-page.account-top.shell-icons #dashboard :is(.account-tabs button,.shell-mode):is(:hover,:focus-visible) .shell-label{border:1px solid CanvasText}
}