/* =============================================================================
   Left navigation revamp
   -----------------------------------------------------------------------------
   Loaded after assets/styles/app.css and assets/cssScripts/resources/css/app.css
   so it wins on order rather than on specificity. Both of those files sit outside
   the grunt build-css block, so they are always the last concatenated stylesheets;
   anything added inside the block would lose to them.

   Visual language:
     level 1  icon + label                     (34 sections, icons are distinctive)
     level 2  dot on a branch guide + label     (icons repeat across 81% of pages)
     level 3  dot on a nested guide + label
     active   raised tile, white label, teal dot, lit guide segment
     ancestor brighter label, teal marker, no background
   ============================================================================= */

:root {
    --nav-bg: #1d2939;
    --nav-tile: #2b3a51;
    --nav-hover: rgba(255, 255, 255, 0.05);
    --nav-muted: #8f939e;
    --nav-bright: #e8edf3;
    --nav-teal: #1caf9a;
    --nav-teal-soft: #5dcaa5;
    --nav-guide: rgba(255, 255, 255, 0.13);
}

/* ===== Panel ===== */

tmx-leftbar .md-sidenav-left {
    background: var(--nav-bg);
    padding-top: 0;
}

tmx-leftbar .md-sidenav-left md-content {
    background-color: var(--nav-bg);
    padding-bottom: 16px;
}

tmx-leftbar .side-menu,
tmx-leftbar .side-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The inset used to live on the <ul> as a hard-coded margin (10px left, 16px right,
   so rows were off-centre and could never reach the panel edge). It is now a single
   symmetric padding on the list, which nested branches inherit. */
tmx-leftbar .side-menu {
    padding: 2px 6px 0;
}

/* menu-link and menu-toggle are custom elements, so they default to display:inline.
   Left inline, every row shrink-wraps its own label and the column comes out ragged. */
tmx-leftbar .side-menu menu-link,
tmx-leftbar .side-menu menu-toggle,
tmx-leftbar .side-menu .menu-level-2 {
    display: block;
    position: relative;
}

/* app.css nudges .menu-level-2 with `left: -6px`, presumably to compensate for the old
   hard-coded <ul> margins. It now just drags level-2 toggle rows 6px out of line with
   their sibling links. */
tmx-leftbar .side-menu .menu-level-2 {
    left: 0;
}

/* ===== Search field ===== */

/* The field shares the rows' 6px inset and 8px corner radius, and its icon sits on the
   same 28px centre line as the section icons, so the placeholder starts at 48px —
   exactly where the row labels start. */
/* Right padding is 6px inset + 8px scrollbar: the field sits outside the scrolling
   md-content, so without the extra it overhangs the rows' right edge by the scrollbar. */
tmx-leftbar .side-search {
    padding: 10px 14px 8px 6px;
    background: var(--nav-bg);
    position: relative;
    z-index: 2;
}

tmx-leftbar .side-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    /* 11px, not 12px: the 1px border is inside the box, so 11+1 lands the icon on the
       same 28px centre line as the section icons */
    padding: 0 9px 0 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: border-color 0.15s ease, background 0.15s ease;
}

tmx-leftbar .side-search-field:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Focus is marked with a brighter neutral edge rather than the teal accent, which read
   as a hard blue ring against the navy panel. */
tmx-leftbar .side-search-field:focus-within {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.34);
}

tmx-leftbar .side-search-field input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--nav-bright);
    font-size: 13px;
    line-height: 18px;
    padding: 0;
    margin: 0;
}

/* digital-invoicing.css is a page stylesheet but is loaded globally from index.html, and
   it carries unscoped `input:hover` / `input:focus, textarea:focus, select:focus` rules
   that paint a sky-blue border plus a 3px glow on every input in the application. The
   focus affordance for this field is the pill border, so that is cancelled here. */
tmx-leftbar .side-search-field input:hover,
tmx-leftbar .side-search-field input:focus {
    border-color: transparent;
    box-shadow: none;
    outline: none;
}

tmx-leftbar .side-search-field input::-webkit-input-placeholder { color: #6b7a8d; }
tmx-leftbar .side-search-field input::-moz-placeholder { color: #6b7a8d; opacity: 1; }
tmx-leftbar .side-search-field input:-ms-input-placeholder { color: #6b7a8d; }

/* 20px matches the section icons, which is what puts it on the same centre line */
tmx-leftbar .side-search-icon {
    color: var(--nav-muted) !important;
    font-size: 20px !important;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
}

tmx-leftbar .side-search-clear {
    color: var(--nav-muted) !important;
    font-size: 16px !important;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0;
    cursor: pointer;
    border-radius: 50%;
}

tmx-leftbar .side-search-clear:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14);
}

tmx-leftbar .side-search-kbd {
    flex: 0 0 auto;
    font-size: 10px;
    line-height: 16px;
    color: #7c8798;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    padding: 0 6px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

tmx-leftbar .side-search-kbd:hover {
    color: var(--nav-bright);
    border-color: rgba(255, 255, 255, 0.36);
}

/* ===== Rows: shared ===== */

tmx-leftbar .side-menu .side-menu-item {
    display: flex !important;
    align-items: center;
    position: relative;
    /* width:auto on a <button> resolves to fit-content, not fill, so it must be explicit */
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    max-height: none;
    margin: 1px 0;
    border-radius: 8px;
    text-align: left;
    text-transform: none;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    color: var(--nav-muted);
    background: transparent;
    /* visible, not hidden, so the active marker's glow is not clipped at the row edge.
       The ripple is clipped on its own container instead. */
    overflow: visible;
    transition: background 0.13s ease, color 0.13s ease;
}

tmx-leftbar .side-menu .side-menu-item .md-ripple-container {
    border-radius: 8px;
    overflow: hidden;
}

tmx-leftbar .side-menu .side-menu-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* Horizontal rhythm, measured from the row's left edge:
     level 1   icon 20px at 12 -> 32 (centre 22),  label at 42
     level 2   icon 18px at 30 -> 48,              label at 56,  guide at 22
     level 3   icon 18px at 48 -> 66,              label at 74,  guide at 40
   The guide runs under the parent row's icon centre and the child icons sit clear to the
   right of it, so the hairline never passes through an icon. */

tmx-leftbar .side-menu .side-menu-icon {
    flex: 0 0 auto;
    color: inherit !important;
    font-size: 20px !important;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0 10px 0 0;
}

/* Sub-level icons are a size down, so depth still reads at a glance */
tmx-leftbar .side-menu .side-menu-item.side-menu-level-n .side-menu-icon,
tmx-leftbar .side-menu .side-menu-item.side-menu-level-2 .side-menu-icon {
    font-size: 18px !important;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0 8px 0 0;
}

/* The .side-menu-item class is repeated in these selectors on purpose: it lifts them to
   (0,3,1), which beats `.side-menu .menu-toggle-list .md-button` at (0,3,0) in
   menu.link.toggle.directive.css. Without it that rule forces padding-left back to 32px. */

/* min-height is set alongside height because Angular Material gives .md-button a
   min-height of 36px, which silently wins over a smaller height. */

/* Level 1 rows carry the icon */
tmx-leftbar .side-menu .side-menu-item.side-menu-level-1 {
    height: 40px;
    min-height: 40px;
    padding: 0 10px 0 12px;
}

/* Level 2 and 3 rows carry a dot on the branch guide */
tmx-leftbar .side-menu .side-menu-item.side-menu-level-n,
tmx-leftbar .side-menu .side-menu-item.side-menu-level-2 {
    height: 34px;
    min-height: 34px;
    padding: 0 10px 0 30px;
}

/* menu.link.toggle.directive.css has `.side-menu menu-toggle span { padding: 12px 0 }`,
   which targets every span inside a toggle. Combined with the global border-box rule it
   inflated the 5px dot into a 5x29px capsule and padded the labels. Neutralised here. */
tmx-leftbar .side-menu menu-toggle span,
tmx-leftbar .side-menu menu-link span {
    padding-top: 0;
    padding-bottom: 0;
}

tmx-leftbar .side-menu .side-menu-dot {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    min-width: 5px;
    padding: 0;
    margin: 0 15px 0 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

/* Level 3 rows step one further in than level 2 */
tmx-leftbar .side-menu .side-menu-branch-2 > li > menu-link > .side-menu-item.side-menu-level-n {
    padding-left: 48px;
}

/* ===== Hover ===== */

tmx-leftbar .side-menu .side-menu-item:not(.is-active):hover {
    background: var(--nav-hover);
    color: var(--nav-bright);
}

tmx-leftbar .side-menu .side-menu-item:not(.is-active):hover .side-menu-dot {
    opacity: 0.85;
}

/* ===== Active page: raised tile ===== */

tmx-leftbar .side-menu .side-menu-item.is-active {
    background: var(--nav-tile);
    color: #ffffff;
    font-weight: 500;
}

tmx-leftbar .side-menu .side-menu-item.is-active .side-menu-icon {
    color: var(--nav-teal-soft) !important;
}

/* Glowing marker at the left of the active row. On nested rows it lands on the branch
   guide, so it reads as a position marker on the line. */
tmx-leftbar .side-menu .side-menu-item.is-active:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    border-radius: 50%;
    background: var(--nav-teal);
    box-shadow: 0 0 0 3px rgba(28, 175, 154, 0.18),
                0 0 7px 1px rgba(28, 175, 154, 0.65);
}

tmx-leftbar .side-menu .side-menu-branch .side-menu-item.is-active:after {
    left: 20px;
}

tmx-leftbar .side-menu .side-menu-branch-2 .side-menu-item.is-active:after {
    left: 38px;
}

tmx-leftbar .side-menu .side-menu-item.is-active .side-menu-dot {
    background: var(--nav-teal);
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(28, 175, 154, 0.18);
}

/* ===== Ancestors of the active page: brighter, never filled ===== */

tmx-leftbar .side-menu .side-menu-toggle.is-ancestor {
    color: var(--nav-bright);
}

tmx-leftbar .side-menu .side-menu-toggle.is-ancestor .side-menu-icon {
    color: var(--nav-teal-soft) !important;
}

tmx-leftbar .side-menu .side-menu-toggle.is-ancestor .side-menu-dot {
    background: var(--nav-teal-soft);
    opacity: 1;
}

/* An open section that is not on the active path still reads as open */
tmx-leftbar .side-menu .side-menu-toggle.is-open {
    color: var(--nav-bright);
}

/* ===== Chevron and count ===== */

tmx-leftbar .side-menu .side-menu-chevron {
    flex: 0 0 auto;
    color: inherit !important;
    opacity: 0.55;
    font-size: 18px !important;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    float: none;
    padding: 0;
    transition: transform 0.18s ease-in-out;
}

tmx-leftbar .side-menu .side-menu-chevron.toggled {
    transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
}

tmx-leftbar .side-menu .side-menu-external {
    flex: 0 0 auto;
    color: inherit !important;
    opacity: 0.45;
    font-size: 14px !important;
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin: 0;
}

/* ===== Branch guides ===== */

tmx-leftbar .side-menu .side-menu-branch {
    position: relative;
    background: transparent;
    overflow: visible;
    padding: 1px 0 3px;
}

tmx-leftbar .side-menu .side-menu-branch:before {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 5px;
    width: 1px;
    background: var(--nav-guide);
}

/* The nested branch sits inside the outer one, so its guide is positioned against
   the same origin rather than being offset again */
tmx-leftbar .side-menu .side-menu-branch-2:before {
    left: 40px;
}

tmx-leftbar .side-menu .side-menu-branch-2 {
    padding-bottom: 2px;
}

/* Level 3 rows sit one step further in than level 2 */
tmx-leftbar .side-menu .side-menu-branch-2 > li > menu-link > .side-menu-item {
    padding-left: 44px;
}

/* The slice of guide beside the active row lights up, so a scrolled section still
   shows which branch the current page belongs to. */
tmx-leftbar .side-menu .side-menu-branch .side-menu-item.is-active:before {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--nav-teal);
}

tmx-leftbar .side-menu .side-menu-branch-2 .side-menu-item.is-active:before {
    left: 40px;
}

/* ===== Filter animation =====
   Rows fade and slide in as the filter narrows. Leaving is deliberately quicker than
   entering: a slow leave holds non-matching rows in the layout while the user is still
   typing, which is what makes a filter feel laggy.

   This deliberately does not cover .side-menu-branch: expanding and collapsing a section
   is animated by the tmx-collapse directive, which sets its own inline transition. */

tmx-leftbar .side-menu li.ng-enter {
    transition: opacity 150ms ease-out, transform 150ms ease-out;
    opacity: 0;
    transform: translateX(-7px);
}

tmx-leftbar .side-menu li.ng-enter.ng-enter-active {
    opacity: 1;
    transform: translateX(0);
}

tmx-leftbar .side-menu li.ng-leave {
    transition: opacity 90ms ease-in;
    opacity: 1;
}

tmx-leftbar .side-menu li.ng-leave.ng-leave-active {
    opacity: 0;
}

/* ===== Search: matched row ===== */

tmx-leftbar .side-menu .side-menu-item.is-hit:not(.is-active) .side-menu-label {
    color: var(--nav-teal-soft);
}

/* ===== Empty state ===== */

tmx-leftbar .side-menu-empty {
    padding: 28px 20px;
    text-align: center;
    color: #6b7a8d;
    font-size: 13px;
    line-height: 1.6;
}

tmx-leftbar .side-menu-empty md-icon {
    color: #4d5a6b !important;
    font-size: 32px !important;
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
}

tmx-leftbar .side-menu-empty-term {
    color: var(--nav-bright);
    margin-top: 2px;
}

/* ===== Scrollbar ===== */

tmx-leftbar .md-sidenav-left md-content::-webkit-scrollbar {
    width: 8px;
}

tmx-leftbar .md-sidenav-left md-content::-webkit-scrollbar-track {
    background: transparent;
}

tmx-leftbar .md-sidenav-left md-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 99px;
    border: 2px solid var(--nav-bg);
}

tmx-leftbar .md-sidenav-left md-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.26);
}

/* =============================================================================
   Collapsed icon rail (rendered by app/private/private.html, outside tmx-leftbar)
   ============================================================================= */

.shortLeftNav .mini-navbtn {
    border-radius: 10px;
    margin: 2px 8px;
    width: auto;
    min-width: 0;
    line-height: 44px;
    transition: background 0.13s ease;
}

.shortLeftNav .mini-navbtn .mini-navicon md-icon,
.shortLeftNav .mini-navbtn .left-bar-icon {
    color: var(--nav-muted) !important;
    transition: color 0.13s ease;
}

.shortLeftNav .mini-nav-slot:hover {
    background-color: transparent;
}

.shortLeftNav .mini-nav-slot:hover .mini-navbtn {
    background: var(--nav-hover);
}

.shortLeftNav .mini-nav-slot:hover .left-bar-icon {
    color: var(--nav-bright) !important;
}

/* Matches the expanded panel: raised tile, teal icon, no flat blue fill */
.shortLeftNav .mini-navbtn.miniselected {
    background-color: var(--nav-tile) !important;
}

.shortLeftNav .mini-navbtn.miniselected .left-bar-icon,
.shortLeftNav .miniSelectedIcon {
    color: var(--nav-teal-soft) !important;
}

/* The flyout is a static block inside a 72px wide, 48px tall slot, so its 248px buttons
   used to spill out of the rail unpositioned. Anchoring it to the slot makes it an actual
   popout panel beside the rail instead. */
.shortLeftNav,
.shortLeftNav .mini-nav-slot {
    overflow: visible;
}

.shortLeftNav .mini-nav-slot {
    position: relative;
}

.shortLeftNav .extend-menu {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 6px;
    width: 248px;
    /* the template sets max-height:250px inline with !important, which cannot be beaten
       from a stylesheet, so the cap is left to the template */
    /* overflow-x must be stated: setting only overflow-y makes the other axis compute to
       auto, which is where the horizontal scrollbar came from */
    overflow-x: hidden;
    overflow-y: auto;
    background: #232f40;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 6px;
    z-index: 20001;
}

.shortLeftNav .extend-menu .extend-nav-btn,
.shortLeftNav .extend-menu .extend-nav-btn-header {
    display: block;
    /* !important is needed: cssScripts/resources/css/app.css hard-codes
       `width: 248px !important` on these, sized for the old panel. Inside the padded
       panel that overflows by ~23px, which is what produced the horizontal scrollbar. */
    width: 100% !important;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    /* the template sets margin-left inline, so it has to be beaten with !important */
    margin: 1px 0 !important;
    padding: 0 10px;
    border-radius: 8px;
    text-transform: none;
    text-align: left;
}

/* Rows carry their own #1d2939 fill in the original stylesheet, which reads as a stack of
   bars against the panel. Transparent lets the hover state do the work instead. */
.shortLeftNav .extend-menu .extend-nav-btn,
.shortLeftNav .extend-menu .extend-nav-btn-header {
    background: transparent !important;
}

/* The header's 2px teal underline is far too loud for a panel title */
.shortLeftNav .extend-menu .extend-nav-btn-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0;
    margin: 0 0 5px !important;
}

.shortLeftNav .extend-menu h1 {
    display: none;
}

/* These are layout="row" flex containers. Without min-width:0 the nowrap label refuses to
   shrink below its content width and pushes the panel's scroll width past its box. */
.shortLeftNav .extend-menu .extend-navtext,
.shortLeftNav .extend-menu .extend-navtext-header {
    font-size: 13px;
    text-transform: none;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.shortLeftNav .extend-menu .extend-navtext {
    color: var(--nav-muted);
}

.shortLeftNav .extend-menu .extend-navtext-header {
    color: var(--nav-bright);
    font-size: 11px;
    letter-spacing: 0.4px;
}

/* the template also sets line-height:50px inline on the label span */
.shortLeftNav .extend-menu .extend-navtext span,
.shortLeftNav .extend-menu .extend-navtext-header span {
    line-height: 34px !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shortLeftNav .extend-menu .md-button.md-default-theme:not([disabled]):hover,
.shortLeftNav .extend-menu .md-button:not([disabled]):hover,
.side-menu .mini-nav-slot .extend-nav-btn:not(.active):hover {
    background: var(--nav-hover) !important;
}

/* Overrides the global .extend-navtext:hover, which shifts the label 10px on hover */
.shortLeftNav .extend-menu .extend-nav-btn:hover .extend-navtext,
.shortLeftNav .extend-menu .extend-navtext:hover {
    color: #ffffff !important;
    padding-left: 0 !important;
    font-size: 13px;
    font-weight: 400;
}

.extend-nav-btn-header:hover {
    background-color: transparent !important;
}