/*-----------------------------------------------------------------------------------*/
/*    AV Xpert Dashboard - Shell Layout                                               */
/*    Top bar, left menu (incl. collapse), section menu tabs, footer.                */
/*    Moved out of CSS/main.css. Theme COLOURS still come from the inline             */
/*    <style> block in includes/head-tag-contents.php (driven by session vars).      */
/*-----------------------------------------------------------------------------------*/

:root {
  --avx-leftmenu-expanded-w: 240px;
  --avx-leftmenu-collapsed-w: 66px;
  --avx-leftmenu-w: var(--avx-leftmenu-expanded-w);
}


/*-----------------------------------------------------------------------------------*/
/*    Top bar                                                                        */
/*-----------------------------------------------------------------------------------*/

.company-header-main {
  float: left;
  width: 100%;
  margin-bottom: 0;
  border-bottom: 3px solid rgb(97 97 97);
}

.avx-header-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  box-sizing: border-box;
}

.avx-header-logo { display: flex; align-items: center; }

.avx-site-branding {
  display: block;
  float: none;
  width: auto;
  max-width: 190px;
  height: auto;
  margin: 12px 0;
}

.avx-header-actions { display: flex; align-items: center; gap: 10px; }

.avx-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background .15s ease;
}
.avx-icon-btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* User chip + dropdown */
.avx-user { position: relative; }

.avx-user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background .15s ease;
}
.avx-user-chip:hover { background: rgba(255, 255, 255, .2); }

.avx-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  color: #222;
  font-weight: 600;
  font-size: 12px;
}

.avx-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avx-user-chip .avx-caret { font-size: 11px; opacity: .85; transition: transform .15s ease; }
.avx-user.open .avx-caret { transform: rotate(180deg); }

.avx-user-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 6px;
  z-index: 200;
  background: #fff;
  color: #222;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}
.avx-user.open .avx-user-menu { display: block; }

.avx-menu-head { padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.avx-menu-name { font-weight: 600; font-size: 14px; }
.avx-menu-sub { font-size: 12px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avx-user-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  color: #333 !important;
  font-size: 13.5px;
  text-decoration: none;
}
.avx-user-menu a:hover { background: #f1f3f5; }
.avx-user-menu a i { width: 16px; text-align: center; opacity: .7; }
.avx-menu-sep { height: 1px; margin: 6px 4px; background: rgba(0, 0, 0, .08); }
.avx-user-menu a.avx-menu-logout { color: #b3261e !important; }
.avx-user-menu a.avx-menu-logout i { opacity: .9; }

/* Notifications bell + panel (same dropdown pattern as the user chip) */
.avx-notif { position: relative; }
.avx-notif .avx-icon-btn { position: relative; }

.avx-notif-badge {
  position: absolute;
  top: -9px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5484d;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid rgba(0, 0, 0, .25);
  box-sizing: border-box;
}

.avx-notif-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 0;
  z-index: 200;
  background: #fff;
  color: #222;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.avx-notif.open .avx-notif-menu { display: block; }

/* Title on its own line, the action toggles on a full row beneath -
   side by side they wrap mid-label and look a mess */
.avx-notif-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  font-weight: 600;
  font-size: 14px;
}
.avx-notif-readall {
  background: none;
  border: none;
  padding: 2px 4px;
  color: #c62a2f;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.avx-notif-readall:hover { text-decoration: underline; }
.avx-notif-readall i { margin-right: 3px; }
.avx-notif-readall.armed { color: #b42318; font-weight: 700; }
/* Mine-only toggle: pill that fills while active. Stays left; margin
   pushes Read all / Unread all to the row's right edge */
.avx-notif-mine {
  margin-right: auto;
  padding: 2px 9px;
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  color: #667085;
}
.avx-notif-mine:hover { text-decoration: none; border-color: #12876f; color: #12876f; }
.avx-notif-mine.on {
  background: color-mix(in srgb, #12876f 10%, #fff);
  border-color: color-mix(in srgb, #12876f 40%, #fff);
  color: #12876f;
  font-weight: 700;
}
.avx-notif-head-acts { display: flex; align-items: center; gap: 12px; width: 100%; }

/* Title on the left, "open the full page" link on the right of the header's
   top row - so it is reachable the moment the panel opens, not buried under
   a long list at the bottom. */
.avx-notif-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
/* Title plus the true-total chip, grouped so the pair sits on the left and the
   "open the full page" link keeps to the right. The corner pill caps at 99+;
   this chip always carries the exact count. */
.avx-notif-head-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.avx-notif-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(229, 72, 77, .14);   /* bell default (matches its red badge); sections retint below */
  color: #c62a2f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.avx-notif-open {
  color: #e5484d !important;   /* bell default, the badge red exactly; triage/ops override below */
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.avx-notif-open:hover { text-decoration: underline; }
.avx-notif-open i { font-size: 11px; margin-left: 3px; }

.avx-notif-list { max-height: 420px; overflow-y: auto; }
.avx-notif-empty { padding: 22px 14px; text-align: center; color: #888; font-size: 13px; }

/* A slim bar closing the panel. Empty for now - kept so the dropdown reads as
   a bounded card, header and footer bookending the list, and as a home for a
   future footer action. */
.avx-notif-foot {
  border-top: 1px solid rgba(0, 0, 0, .08);
  padding: 7px 14px;
  min-height: 9px;
}

/* Mini sales triage (pound-sign button) - same panel chrome as the bell,
   amber badge to tell the two apart at a glance */
.avx-triage-badge { background: #ff9d2b; color: #3d2503; }
.avx-triage .avx-notif-open { color: #b76e00 !important; }
.avx-triage .avx-notif-count { background: rgba(255, 157, 43, .18); color: #b76e00; }

/* Operations triage (spanner button) - steel teal, matching the ops
   cockpit accent, so the three pills read at a glance */
.avx-ops-badge { background: #12909e; color: #fff; }
.avx-ops .avx-notif-open { color: #0b6d78 !important; }
.avx-ops .avx-notif-count { background: rgba(18, 144, 158, .15); color: #0b6d78; }

/* Small screens: the dropdowns are anchored right:0 to their buttons, so
   the pound panel (whose button sits further left) hangs off the viewport.
   Pin both panels to the viewport instead - a full-width sheet under the
   header. The "open full" link now lives in the header, always visible at
   the top, so the list just caps to stay within the viewport. */
@media (max-width: 600px) {
  .avx-notif-menu {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 76px;
    width: auto;
    max-width: none;
  }
  /* dvh tracks the REAL visible viewport (100vh includes the area behind the
     mobile URL bar); the vh line is the fallback for older browsers. */
  .avx-notif-list { max-height: 42vh; max-height: 55dvh; }
}

.avx-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 14px;
  text-decoration: none;
  color: #333 !important;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.avx-notif-item:last-child { border-bottom: none; }
.avx-notif-item:hover { background: #f1f3f5; }
.avx-notif-item.unread { background: #fdf3f3; }
.avx-notif-item.unread:hover { background: #fbe9ea; }

.avx-notif-ico {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .05);
  font-size: 13px;
  margin-top: 1px;
}

.avx-notif-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.avx-notif-title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.avx-notif-body { font-size: 12px; color: #667085; line-height: 1.4; }
.avx-notif-when { font-size: 11px; color: #98a2b3; }

/* Meta row: context chip (what the notification is about) + age */
.avx-notif-meta { display: flex; align-items: center; gap: 7px; margin-top: 1px; }

.avx-notif-ctx {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2f6;
  border: 1px solid #e4e7ec;
  color: #475467;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Ownership chip on opp-linked items: the opp owner's name, or a green
   Mine when the opp belongs to the viewer */
.avx-notif-own {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f7f8fa;
  border: 1px solid #e4e7ec;
  color: #667085;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.avx-notif-own.mine {
  background: color-mix(in srgb, #12876f 10%, #fff);
  border-color: color-mix(in srgb, #12876f 32%, #fff);
  color: #12876f;
}

.avx-notif-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #e5484d;
  margin-top: 6px;
}

/* Per-item actions: read/unread toggle + clear */
.avx-notif-acts { display: flex; gap: 3px; flex: 0 0 auto; margin-top: 1px; }

.avx-notif-act {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 7px;
  background: none;
  color: #98a2b3;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avx-notif-act:hover { background: #e4e7ec; color: #344054; }


/*-----------------------------------------------------------------------------------*/
/*    Left menu                                                                      */
/*-----------------------------------------------------------------------------------*/

.avx-topnav {
  width: 100%;
  float: left;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding-bottom: 10px;
  background: var(--avx-nav-grad);   /* gradient supplied inline as a custom property */
}

.avx-topnav .topnav {
  background: none;
  border: none;
  overflow: visible;
  padding: 6px 0 0;
}

/* Collapse toggle - small, tucked in the top corner, outside the link list
   (tooltip via title attribute) */
.avx-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 8px 0 2px 17px;
  padding: 0;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, .07);
  transition: background .15s ease;
}
.avx-collapse-toggle:hover { background: rgba(255, 255, 255, .16); }
.avx-collapse-toggle i { font-size: 13px; }

/* Nav links */
.avx-topnav a.nav-link {
  display: flex;
  align-items: center;
  gap: 13px;
  width: calc(100% - 16px);
  margin: 2px 8px !important;
  padding: 10px 12px !important;
  border: none;
  border-radius: 9px;
  color: #fff !important;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
.avx-topnav a.nav-link i { width: 22px; text-align: center; font-size: 17px; flex: 0 0 auto; }
.avx-topnav a.nav-link .homelink-text { display: flex; align-items: center; gap: 13px; }

/* Active item - wrapper-driven (.home-current .homelink, .home2-current .home2 …). */
/* Shared with the sales sub-nav, so the full class list is preserved here.        */
.home-current .homelink, .home1-current .home1, .home1a-current .home1a,
.home2-current .home2, .home3-current .home3, .home4-current .home4,
.home5-current .home5, .home6-current .home6, .home7-current .home7,
.home8-current .home8, .home9-current .home9, .home10-current .home10,
.home11-current .home11, .home12-current .home12, .home13-current .home13,
.home14-current .home14, .home15-current .home15, .home16-current .home16,
.home17-current .home17, .home19-current .home19, .home20-current .home20,
.home21-current .home21, .home22-current .home22, .home23-current .home23,
.acc1-current a.acc1, .acc2-current a.acc2, .acc3-current a.acc3,
.acc4-current a.acc4, .acc5-current a.acc5, .acc6-current a.acc6,
.acc7-current a.acc7, .acc8-current a.acc8 {
  background: #363636 !important;
  color: #fff !important;
  font-weight: 600;
}


/*-----------------------------------------------------------------------------------*/
/*    Left menu - collapsed (desktop only; below 1140px the hamburger takes over)    */
/*-----------------------------------------------------------------------------------*/

@media only screen and (min-width: 1140px) {
  .left-menu { width: var(--avx-leftmenu-w); }
  .right-content { width: calc(100% - var(--avx-leftmenu-w)); }
  .left-menu, .right-content { transition: width .2s ease; }

  /* Same list position in every mode - the offset also puts the auto flyout
     below the section tab bar */
  .avx-topnav .topnav { margin-top: 16px; }

  html.nav-collapsed { --avx-leftmenu-w: var(--avx-leftmenu-collapsed-w); }

  html.nav-collapsed .avx-topnav .nav-t { display: none; }
  html.nav-collapsed .avx-topnav a.nav-link { justify-content: center; gap: 0; }
  html.nav-collapsed .avx-topnav a.nav-link .homelink-text { gap: 0; }

  /* Auto mode: page laid out at collapsed width; hovering the LINK LIST (not the
     toggle above it) slides just that list out OVER the content, labels fading
     in. The list starts low enough to clear the section tab bar with a gap. */
  html.nav-auto { --avx-leftmenu-w: var(--avx-leftmenu-collapsed-w); }
  html.nav-auto .left-menu { z-index: 60; }
  html.nav-auto .avx-topnav .topnav {
    width: var(--avx-leftmenu-collapsed-w);
    overflow: hidden;
    background: var(--avx-nav-grad);
    border-radius: 0 12px 12px 0;
    transition: width .18s ease, box-shadow .18s ease;
  }
  html.nav-auto .avx-topnav .nav-t { opacity: 0; transition: opacity .15s ease; }
  html.nav-auto .avx-topnav .topnav:hover {
    width: var(--avx-leftmenu-expanded-w);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
  }
  html.nav-auto .avx-topnav .topnav:hover .nav-t { opacity: 1; }
}

@media only screen and (max-width: 1139px) {
  .avx-collapse-toggle { display: none; }
}

/* ============================================================================
   Mobile (<=1035px): each menu bar shows the active item + a hamburger PINNED
   top-right (it never moves between collapsed/expanded). Tapping the hamburger
   adds .responsive and the full list drops down as rows. Everything is forced
   with !important to fully override the legacy float-based .topnav rules in
   main.css. The sales nav gets the same layout - only its accent colours differ.
   ============================================================================ */
@media only screen and (max-width: 1035px) {

  /* ----- Bar containers: relative, with a right gutter for the pinned hamburger ----- */
  #myTopnav,
  #myAccTopnav {
    position: relative !important;
    overflow: visible !important;
    padding: 5px 58px 5px 8px !important;
    box-sizing: border-box;
  }

  /* ----- Hamburger: pinned top-right, identical in both states ----- */
  #myTopnav .main-icon,
  #myAccTopnav .myacc-icon {
    display: flex !important; align-items: center; justify-content: center;
    position: absolute !important; top: 4px !important; right: 8px !important; left: auto !important; bottom: auto !important;
    width: 44px !important; height: 36px !important;
    margin: 0 !important; padding: 0 !important; float: none !important;
  }
  /* section hamburger: bars only, no button styling (no bg/border/radius) */
  #myAccTopnav .myacc-icon { font-size: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; }
  #myAccTopnav .myacc-icon i { font-size: 18px !important; float: none !important; padding: 0 !important; }

  /* ----- App menu items ----- */
  #myTopnav a.nav-link { display: none !important; float: none !important; width: 100% !important; margin: 3px 0 !important; }
  .home-current #myTopnav .homelink,
  .home1a-current #myTopnav .home1a,
  .home1-current #myTopnav .home1, .home2-current #myTopnav .home2,
  .home3-current #myTopnav .home3, .home4-current #myTopnav .home4,
  .home5-current #myTopnav .home5, .home6-current #myTopnav .home6,
  .home7-current #myTopnav .home7, .home8-current #myTopnav .home8,
  .home9-current #myTopnav .home9, .home10-current #myTopnav .home10,
  .home11-current #myTopnav .home11, .home12-current #myTopnav .home12,
  .home13-current #myTopnav .home13, .home14-current #myTopnav .home14,
  .home15-current #myTopnav .home15, .home16-current #myTopnav .home16,
  .home17-current #myTopnav .home17, .home19-current #myTopnav .home19,
  .home20-current #myTopnav .home20, .home21-current #myTopnav .home21,
  .home22-current #myTopnav .home22, .home23-current #myTopnav .home23 {
    display: flex !important; width: 100% !important; margin: 0 !important;   /* active = full-width bar (collapsed) */
  }
  #myTopnav.responsive a.nav-link { display: flex !important; width: 100% !important; margin: 3px 0 !important; }  /* expanded = rows */

  /* ----- Section menu items ----- */
  #myAccTopnav a:not(.icon) { display: none !important; float: none !important; width: 100% !important; margin: 3px 0 !important; }
  .acc1-current #myAccTopnav a.acc1, .acc2-current #myAccTopnav a.acc2,
  .acc3-current #myAccTopnav a.acc3, .acc4-current #myAccTopnav a.acc4,
  .acc5-current #myAccTopnav a.acc5, .acc6-current #myAccTopnav a.acc6,
  .acc7-current #myAccTopnav a.acc7, .acc8-current #myAccTopnav a.acc8,
  .home1-current #myAccTopnav .home1:not(.oppslink), .home2-current #myAccTopnav .home2:not(.oppslink),
  .home3-current #myAccTopnav .home3:not(.oppslink), .home4-current #myAccTopnav .home4:not(.oppslink),
  .home5-current #myAccTopnav .home5:not(.oppslink), .home6-current #myAccTopnav .home6:not(.oppslink),
  .home7-current #myAccTopnav .home7:not(.oppslink), .home8-current #myAccTopnav .home8:not(.oppslink),
  .home9-current #myAccTopnav .home9:not(.oppslink), .home10-current #myAccTopnav .home10:not(.oppslink),
  .home11-current #myAccTopnav .home11:not(.oppslink), .home12-current #myAccTopnav .home12:not(.oppslink),
  .home13-current #myAccTopnav .home13:not(.oppslink), .home14-current #myAccTopnav .home14:not(.oppslink),
  .home15-current #myAccTopnav .home15:not(.oppslink), .home16-current #myAccTopnav .home16:not(.oppslink),
  .home17-current #myAccTopnav .home17:not(.oppslink), .home19-current #myAccTopnav .home19:not(.oppslink),
  .home20-current #myAccTopnav .home20:not(.oppslink), .home21-current #myAccTopnav .home21:not(.oppslink),
  .home22-current #myAccTopnav .home22:not(.oppslink),
  .home23-current #myAccTopnav .home23:not(.oppslink) {
    display: block !important; width: 100% !important; margin: 0 !important;   /* active tab = full-width bar (collapsed) */
  }
  #myAccTopnav.responsive a:not(.icon):not(.oppslink) { display: block !important; width: 100% !important; margin: 5px 0 !important; }  /* expanded = rows */

  /* Section items: even corners + tighter padding so they match the app menu */
  .ac-navi #myAccTopnav a:not(.icon) { padding: 8px 12px !important; border-radius: 9px !important; }

  /* ----- Sales Manager dropdowns: drop the redundant trigger links (.oppslink stays
     hidden) and flatten the dropdown items inline, so the active item can show when
     collapsed and the whole list shows when expanded. (Only the sales nav has .dropdown.) ----- */
  #myAccTopnav .dropdown { width: 100% !important; overflow: visible !important; float: none !important; }
  #myAccTopnav .dropdown-content { display: block !important; position: relative !important; }
}

/* Mobile top bar: smaller logo + breathing room so the user chip clears the edge */
@media only screen and (max-width: 767px) {
  .avx-header-content { padding: 0 14px; }
  .avx-site-branding { width: auto; max-width: 120px; margin: 10px 0; padding: 0; }
  .avx-header-actions { gap: 8px; }
}


/*-----------------------------------------------------------------------------------*/
/*    Section menu - tab strip (.ac-navi)                                            */
/*    Per-section accent colours stay in CSS/main.css (theme colours).               */
/*-----------------------------------------------------------------------------------*/

.ac-nav-main { float: left; width: 100%; }
.ac-navi { float: left; width: 100%; }
.ac-navi .topnav { background: none; border: none; overflow: visible; }

#myAccTopnav { padding: 4px 0 0; }

.ac-navi a {
  float: left;
  margin: 0 2px !important;
  padding: 9px 16px !important;
  color: #fff !important;
  font-size: 13.5px;
  text-decoration: none;
  background: rgba(0, 0, 0, .18) !important;
  border-radius: 8px 8px 0 0;
  transition: background .15s ease;
}
.ac-navi a:hover { background: rgba(0, 0, 0, .32) !important; }

/* Section tabs align with the page content - desktop only (declared after the
   base #myAccTopnav rule so it wins; on mobile there is no left indent). */
@media only screen and (min-width: 1140px) {
  .ac-navi .topnav { padding-left: 38px; }
  #myAccTopnav { padding-left: 38px; }
}


/*-----------------------------------------------------------------------------------*/
/*    Footer - slim bar                                                              */
/*-----------------------------------------------------------------------------------*/

.site-footer {
  float: left;
  width: 100%;
  padding: 0;
  color: #fff;
  background: #111;
  border-top: 2px solid #333;
}

.avx-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
}

.avx-footer-left { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
.site-footer .footlogo { height: 28px; width: auto; margin: 0; opacity: .9; }
.avx-copyright { font-size: 12px; color: #bdbdbd; line-height: 1.6; }
.avx-legal-inline { color: #8f8f8f; }

.avx-footer-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; flex: 0 0 auto; }
.avx-footer-right a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cfcfcf !important;
  font-size: 12px;
  text-decoration: none;
}
.avx-footer-right a:hover { color: #fff !important; }