/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 5.0
	Author: PIXINVENT
	Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.nav-collapsed .brand-sidebar .brand-logo {
  padding: 13px 12px 22px 15px;
}

.brand-sidebar .logo-wrapper a.brand-logo img {
  height: 35px;
}

.brand-sidebar .brand-logo {
  padding: 13px 12px 22px 22px;
  font-size: 1.5rem;
}

.brand-sidebar span.logo-text {
  vertical-align: super;
  padding-left: 10px;
}

#breadcrumbs-wrapper {
  padding-top: 1% !important;
}

#breadcrumbs-wrapper .breadcrumbs > li {
  color: #ffffffb8;
}

#breadcrumbs-wrapper .breadcrumbs .active {
  color: #ffffffad;
}

.swal-button--cancel {
  color: #fff;
  background-color: #ff4081;
}

.gradient-107deg-red-pink {
  background: linear-gradient(107deg, #d60620, #fd2970d7) !important;
}

.toast-success {
  background-color: #4caf50;
}

.toast-info {
  background-color: #00bcd4;
}

.toast-warning {
  background-color: #ff9800;
}

.toast-error {
  background-color: #f44336;
}

#main .section-data-tables .dataTables_wrapper table.dataTable tbody {
  color: black;
  height: 100%;
}

/* ---- Desktop navbar row (>=993px) ----------------------------------------
   The right-hand cluster used to be a float laid out against a search box of
   ASSUMED width. The theme sizes .header-search-wrapper as `100% - 360px`
   (`100% - 560px` past .sideNav-lock) and this file used to shave that to
   `100% - 310px` / `100% - 510px`, which leaves ~235-240px of row for the
   list. Three buttons needed ~210px and fit. The Ask AI button (PR #445) made
   it four, ~264px, and the float had nowhere to sit: the bell, Ask AI and the
   avatar dropped to a second line UNDER the fixed 64px bar, over the page
   content, on every page.

   So the row measures the list instead of guessing it. The list keeps its
   natural width, the search box takes whatever is left, and the next button
   added here shortens the search box rather than breaking the bar.

   Scoped to `.navbar-main` on purpose: `.navbar` also contains the phone
   search bar (`nav.search-sm`) and, in the horizontal layout, the entire
   horizontal menu (`#horizontal-nav`) - both own a `.nav-wrapper` of their
   own and neither is this row. `.navbar-main` is on the main <nav> of every
   layout (Helpers::$navbarMainClass), so one rule covers vertical and
   horizontal.

   >=993px ONLY. Below it .header-search-wrapper is display:none
   (`hide-on-med-and-down` - Materialize's own breakpoint, materialize.css
   2833), the search is an icon inside the list instead, and the mobile brand
   lockup is positioned against that exact layout (commit 7ec842b0). The three
   `ul.dropdown-content` sharing this wrapper are position:absolute whether
   open or closed (materialize.css 5115), so they never become flex items -
   which is also why it does not matter that Materialize's Dropdown may
   re-parent them beside their trigger at init. */
@media only screen and (min-width: 993px) {
  .navbar .navbar-main > .nav-wrapper {
    display: flex;
    align-items: center;
  }

  .navbar .navbar-main > .nav-wrapper .header-search-wrapper {
    flex: 1 1 auto;
    width: auto;
    /* A flex item's automatic minimum size is its CONTENT size; without this
       the input refuses to shrink and the overflow comes straight back. */
    min-width: 0;
    /* The left margin stays the theme's - 75px, or 270px past .sideNav-lock.
       The other three go: align-items:center does the vertical centring now,
       and the theme's `margin: 10px auto 0 ...` also carries a margin-right of
       auto, which has no business on a flex row. */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
  }

  .navbar .navbar-main > .nav-wrapper .navbar-list.right {
    flex: 0 0 auto;
    /* Ignored on a flex item in any case; said out loud because the float is
       the thing that dropped the cluster to a second line. What pins the list
       to the right edge now is the auto margin - and it keeps doing so when
       there is no search box on the row at all (a tenant whose global-search
       page grant is off renders none). */
    float: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
}

@media only screen and (max-width: 992px) {
  .brand-sidebar .brand-logo {
    padding: 13px 12px 0px 63px;
  }
}
@media only screen and (max-width: 768px) {
  .brand-sidebar .brand-logo {
    padding: 13px 12px 0px 60px;
  }
}
@media only screen and (max-width: 600px) {
  .sidenav-main .brand-sidebar .brand-logo {
    padding: 9px 12px 0px 50px;
  }

  /* The language button's inline height:64px / margin-top:21px assume the
     64px desktop bar; the bar is 56px here, so re-center the flag. */
  .dropdown-language {
    padding-top: 0;
  }
  .dropdown-language .translation-button {
    height: 56px !important;
  }
  .dropdown-language .flag-icon {
    margin-top: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   Navbar search: the "最近 Recent" list.
   docs/superpowers/specs/2026-09-04-search-history-design.md

   Rows are the theme's own .auto-suggestion rows (global-search.js builds them
   with the same function the live results use), so the only thing styled here
   is the two controls the recent list adds: 清除 Clear beside the heading, and
   the per-row ×.

   DESIGN.md: --text-muted at rest, --red on hover/focus, --radius-sm, the
   --font-body stack. Values are inlined beside the token name because this
   stylesheet is loaded on pages that do not declare a :root token block.

   position:relative on the row is load-bearing, not tidiness: .search-list is
   a PerfectScrollbar container, and an absolutely-positioned child with no
   positioned ancestor resolves against the document and stretches the page
   (the same trap as the picker checkboxes in PR #489).
--------------------------------------------------------------------------- */
.search-list li.sh-recent-title {
  display: flex;
  align-items: center;
}

.search-list li.sh-recent-title > a.collection-item {
  flex: 1 1 auto;
}

.search-list li.sh-recent-row {
  position: relative;
}

.search-list .sh-recent-clear,
.search-list .sh-recent-remove {
  font-family: 'DM Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  color: var(--text-muted, #5A6478);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}

.search-list .sh-recent-clear {
  flex: 0 0 auto;
  margin-right: 16px;
  font-size: 11px;
  font-weight: 600;
}

.search-list .sh-recent-remove {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 18px;
  /* Kept out of the way until the row is under the cursor or the keyboard
     highlight; opacity rather than display so it stays focusable by Tab. */
  opacity: 0;
  transition: opacity 80ms ease-out;
}

.search-list li.sh-recent-row:hover .sh-recent-remove,
.search-list li.sh-recent-row.current_item .sh-recent-remove,
.search-list .sh-recent-remove:focus {
  opacity: 1;
}

.search-list .sh-recent-clear:hover,
.search-list .sh-recent-clear:focus,
.search-list .sh-recent-remove:hover,
.search-list .sh-recent-remove:focus {
  color: var(--red, #C8282E);
}

/* ---- Navbar menu dropdowns size to their own labels ----------------------
   MEASURED in a live page, because none of the three parts of this bug is
   visible in any single file:

     .navbar #profile-dropdown { width: 160px }   <- theme style.css:6594
     .dropdown-content { overflow-y: auto }       <- materialize.css:5116
     .navbar-list.right { white-space: nowrap }   <- this file, ~line 128

   The theme hard-codes the account menu at 160px. It fitted a one-word
   "Logout" and nothing else. Adding 成本口径 Cost Basis needs 228px of
   content (getComputedStyle width 160px, scrollWidth 204px, max-content
   228px), so:

     1. the label was cut mid-word - nowrap is inherited from the navbar row,
        so it cannot reflow, it can only be sliced;
     2. a horizontal scrollbar appeared on a MENU - CSS promotes overflow-x
        from `visible` to `auto` whenever overflow-y is `auto`, so the theme's
        160px plus overflowing content is all it takes;
     3. it clipped at the right edge instead of growing leftward. Materialize
        clears the inline width, MEASURES the element, then freezes the result
        as an inline px width and derives `left` from it (materialize.js:2737,
        _placeDropdown). With constrainWidth:false it measures the DROPDOWN -
        which the theme had pinned at 160px. So `left` was computed for a
        160px box, and anything wider grows off-screen to the right.

   Fixing it with a bigger fixed width would just move the next translated
   label's cliff, so the box is content-sized instead. `min-width: max-content`
   is the lever that works: min-width clamps the used width upward, so it beats
   BOTH the theme's 160px and the inline px width Materialize writes, without
   !important. And because Materialize resets the inline width before it
   measures (_resetDropdownStyles, materialize.js:2548), the width it measures
   is now the true content width - so `left` is derived from the real box and
   the menu grows leftward on its own. No JS change is needed.

   max-width keeps it inside the viewport at 375px, where max-content alone
   would run off the edge. It is 100vw-based rather than a fixed px so it holds
   at any width.

   Scoped to the two LABEL menus. #notifications-dropdown is deliberately NOT
   here: it is 400px of wrapping prose, and max-content on a paragraph would
   stretch it to the viewport. overflow-x:hidden does apply to all three -
   a menu never scrolls sideways, whatever is in it. */
.navbar #profile-dropdown,
.navbar #translation-dropdown {
  width: auto;
  min-width: max-content;
  max-width: calc(100vw - 24px);
}

.navbar .dropdown-content {
  overflow-x: hidden;
}