html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
  }
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}
/* TRICOM Fleet Monitoring - custom login presentation */
@media (min-width: 601px) {
  main > div:first-child > * { opacity: 0 !important; }
}

main > .MuiPaper-root {
  background: #ffffff;
}

main form {
  position: relative;
  box-sizing: border-box;
  max-width: 470px !important;
  padding: 190px 42px 42px !important;
  background-image: url('/tricom-logo.png');
  background-repeat: no-repeat;
  background-position: center 72px;
  background-size: min(310px, 78%) auto;
}

main form::before {
  content: 'Welcome to';
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  text-align: center;
  color: #082b6f;
  font: 700 20px/1.2 Arial, sans-serif;
}

main form::after {
  content: 'Sign in to access your fleet tracking system.';
  display: block;
  text-align: center;
  margin-top: 28px;
  color: #6b7b98;
  font: 400 13px/1.4 Arial, sans-serif;
}

main form .MuiTextField-root .MuiOutlinedInput-root {
  border-radius: 9px;
  background: #fff;
}

main form button[type='submit'] {
  min-height: 48px;
  border-radius: 8px;
  background: #0962e8 !important;
  color: #fff !important;
  font-weight: 700;
  text-transform: none;
  box-shadow: 0 8px 20px rgba(9, 98, 232, .18);
}

@media (max-width: 600px) {
  main form {
    max-width: 430px !important;
    padding: 165px 28px 32px !important;
    background-position: center 60px;
    background-size: min(280px, 76%) auto;
  }
  main form::before { top: 28px; font-size: 18px; }
}


/* =========================================================
   TRICOM Fleet Monitoring - authenticated dashboard theme
   Desktop presentation inspired by approved dashboard mockup.
   ========================================================= */
@media (min-width: 901px) {
  body {
    background: #eef4fb;
  }

  /* Main app surface */
  #root {
    background: #eef4fb;
  }

  /* Existing Traccar device drawer/panel */
  .MuiDrawer-paper {
    border: 0 !important;
    box-shadow: 0 10px 35px rgba(4, 35, 88, .14) !important;
  }

  /* Device panel cards / papers */
  .MuiPaper-root {
    border-color: #e4ebf5;
  }

  /* Search fields and controls */
  .MuiOutlinedInput-root {
    border-radius: 10px !important;
    background: #fff;
  }

  /* Buttons */
  .MuiButton-containedPrimary {
    background: #0b63e6 !important;
    border-radius: 9px !important;
    box-shadow: 0 7px 18px rgba(11, 99, 230, .20) !important;
    text-transform: none !important;
  }

  /* Device list rows */
  .MuiListItem-root {
    transition: background .16s ease, transform .16s ease;
  }
  .MuiListItem-root:hover {
    background: #f2f7ff;
  }

  /* Bottom navigation becomes a strong TRICOM navigation strip */
  .MuiBottomNavigation-root {
    background: linear-gradient(180deg, #082b6f 0%, #061f50 100%) !important;
    border-top: 0 !important;
    min-height: 76px !important;
    box-shadow: 0 -7px 22px rgba(3, 29, 72, .16);
  }
  .MuiBottomNavigationAction-root,
  .MuiBottomNavigationAction-label {
    color: rgba(255,255,255,.78) !important;
  }
  .MuiBottomNavigationAction-root.Mui-selected,
  .MuiBottomNavigationAction-root.Mui-selected .MuiBottomNavigationAction-label,
  .MuiBottomNavigationAction-root.Mui-selected svg {
    color: #ffffff !important;
  }
  .MuiBottomNavigationAction-root.Mui-selected {
    background: rgba(20, 111, 255, .28);
  }

  /* Map control buttons */
  .maplibregl-ctrl-group,
  .mapboxgl-ctrl-group {
    border-radius: 11px !important;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(6, 31, 72, .18) !important;
  }

  /* Dialogs and popovers */
  .MuiDialog-paper,
  .MuiPopover-paper,
  .MuiMenu-paper {
    border-radius: 14px !important;
    box-shadow: 0 18px 55px rgba(4, 35, 88, .20) !important;
  }

  /* Tooltips / chips */
  .MuiChip-root {
    border-radius: 8px !important;
  }
}

/* Tablet and phone: retain Traccar's proven responsive layout,
   only apply the TRICOM visual language. */
@media (max-width: 900px) {
  .MuiBottomNavigation-root {
    background: #082b6f !important;
  }
  .MuiBottomNavigationAction-root,
  .MuiBottomNavigationAction-label {
    color: rgba(255,255,255,.78) !important;
  }
  .MuiBottomNavigationAction-root.Mui-selected,
  .MuiBottomNavigationAction-root.Mui-selected svg,
  .MuiBottomNavigationAction-root.Mui-selected .MuiBottomNavigationAction-label {
    color: #fff !important;
  }
  .MuiOutlinedInput-root {
    border-radius: 9px !important;
  }
}

/* TRICOM blue selection language across authenticated pages */
.MuiTabs-indicator {
  background-color: #0b63e6 !important;
}
.Mui-selected {
  color: #0b63e6;
}

/* TRICOM v4 precise authenticated shell */
:root { --tricom-side: 288px; --tricom-top: 74px; --tricom-kpi: 108px; }
body.tricom-authenticated { background:#eef5fc !important; overflow:hidden; }
body.tricom-authenticated #root {
  position:fixed !important; left:var(--tricom-side) !important; right:0 !important;
  top:calc(var(--tricom-top) + var(--tricom-kpi)) !important; bottom:0 !important;
  width:auto !important; height:auto !important; background:#fff !important;
}
#tricom-dashboard-shell { font-family:Arial,Helvetica,sans-serif; color:#082b6f; }
.tricom-sidebar {
  position:fixed; z-index:5000; inset:0 auto 0 0; width:var(--tricom-side);
  background:linear-gradient(180deg,#062b68 0%,#041f4d 100%); color:#fff;
  display:flex; flex-direction:column; box-shadow:8px 0 25px rgba(8,43,111,.10);
}
.tricom-side-logo { padding:18px 28px 14px; text-align:center; }
.tricom-side-logo img { width:215px; height:52px; object-fit:contain; filter:brightness(0) invert(1); }
.tricom-side-logo div { font-size:11px; letter-spacing:5px; margin-top:1px; }
.tricom-nav { padding:4px 12px; }
.tricom-nav-item {
  width:100%; height:52px; border:0; border-radius:9px; background:transparent; color:#fff;
  display:flex; align-items:center; gap:17px; padding:0 17px; font-size:18px; cursor:pointer; text-align:left;
}
.tricom-nav-item:hover { background:rgba(255,255,255,.08); }
.tricom-nav-item.active { background:#0b66e8; box-shadow:0 8px 20px rgba(0,0,0,.13); }
.tricom-nav-icon { width:28px; text-align:center; font-size:23px; color:#fff; }
.tricom-side-brand { margin-top:auto; border-top:1px solid rgba(255,255,255,.17); padding:20px 23px 18px; position:relative; overflow:hidden; min-height:270px; }
.tricom-side-brand strong { font-size:16px; letter-spacing:1px; line-height:1.45; }
.tricom-side-brand small { display:block; margin-top:22px; font-size:9px; white-space:nowrap; }
.tricom-side-brand b { position:absolute; left:22px; bottom:18px; font-size:19px; line-height:1.25; }
.tricom-side-art { position:absolute; left:0; right:0; bottom:0; height:195px; background:url('/tricom-login-hero.jpg') center bottom/cover no-repeat; opacity:.38; mask-image:linear-gradient(transparent,#000 40%); }

.tricom-topbar {
  position:fixed; z-index:4900; left:var(--tricom-side); right:0; top:0; height:var(--tricom-top);
  background:#f5f9fe; display:flex; align-items:center; justify-content:space-between; padding:0 30px 0 24px;
  border-bottom:1px solid #e5edf7;
}
.tricom-global-search { width:505px; height:43px; background:#fff; border:1px solid #cad9ec; border-radius:8px; display:flex; align-items:center; gap:10px; padding:0 14px; font-size:25px; }
.tricom-global-search input { border:0; outline:0; width:100%; font-size:15px; color:#1b3f77; }
.tricom-top-right { display:flex; align-items:center; gap:13px; color:#062b68; }
.tricom-bell { position:relative; font-size:20px; }
.tricom-bell i { position:absolute; top:-9px; right:-10px; background:#ef2929; color:#fff; width:18px; height:18px; border-radius:50%; font-size:10px; font-style:normal; display:grid; place-items:center; }
.tricom-avatar { width:39px; height:39px; border-radius:50%; background:#07398c; color:#fff; display:grid; place-items:center; font-weight:700; }
.tricom-user-name { margin-right:25px; }
.tricom-date { border-left:1px solid #cbd8e8; padding-left:28px; }

.tricom-kpis {
  position:fixed; z-index:4800; left:var(--tricom-side); right:0; top:var(--tricom-top); height:var(--tricom-kpi);
  background:#f3f8fd; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:13px 18px 15px;
}
.tricom-kpi { background:#fff; border:1px solid #e0e9f4; border-radius:10px; display:flex; align-items:center; gap:20px; padding:0 25px; box-shadow:0 3px 10px rgba(18,58,110,.05); }
.tricom-kpi-number { display:block; font-size:22px; color:#082b6f; }
.tricom-kpi small { display:block; margin-top:3px; font-size:14px; color:#4c6892; }
.tricom-kpi-icon,.tricom-bars { font-size:35px; color:#0b55bc; }
.tricom-dot { width:25px; height:25px; border-radius:50%; }
.tricom-dot.online { background:#0cc43c; } .tricom-dot.offline { background:#ff2c31; }

/* make native Traccar map/device workspace feel like the approved mockup */
body.tricom-authenticated #root > div { height:100% !important; }
body.tricom-authenticated .MuiBottomNavigation-root { display:none !important; }
body.tricom-authenticated .MuiPaper-root { border-radius:10px; }
body.tricom-authenticated .MuiDrawer-paper { top:0 !important; height:100% !important; box-shadow:4px 0 14px rgba(0,34,84,.08) !important; }
body.tricom-authenticated .MuiOutlinedInput-root { border-radius:8px !important; }
body.tricom-authenticated .maplibregl-ctrl-group { border-radius:8px !important; }

@media(max-width:1000px){
  :root { --tricom-side:0px; --tricom-top:60px; --tricom-kpi:0px; }
  .tricom-sidebar,.tricom-kpis { display:none; }
  .tricom-topbar { left:0; height:60px; padding:0 10px; }
  .tricom-global-search { width:55%; height:40px; }
  .tricom-date,.tricom-user-name { display:none; }
  body.tricom-authenticated #root { top:60px !important; }
  body.tricom-authenticated .MuiBottomNavigation-root { display:flex !important; background:#082b6f !important; }
}


/* =========================================================
   TRICOM v4.1 - layout correction from actual 1600x900 render
   ========================================================= */
@media (min-width: 1001px) {
  :root {
    --tricom-side: 280px;
    --tricom-top: 74px;
    --tricom-kpi: 132px;
    --tricom-device-panel: 350px;
  }

  /* Correct logo: preserve original TRICOM colors; no white/invert filter */
  .tricom-side-logo {
    height: 112px;
    padding: 18px 20px 8px;
    box-sizing: border-box;
  }
  .tricom-side-logo img {
    width: 220px !important;
    height: 62px !important;
    object-fit: contain !important;
    filter: none !important;
    display: block;
    margin: 0 auto;
  }
  .tricom-side-logo div {
    margin-top: 0;
    font-size: 10px;
    letter-spacing: 5px;
  }

  /* Match approved sidebar proportions more closely */
  .tricom-nav { padding: 3px 12px; }
  .tricom-nav-item {
    height: 49px;
    font-size: 17px;
    gap: 15px;
  }
  .tricom-side-brand {
    min-height: 235px;
    padding-top: 16px;
  }

  /* Header */
  .tricom-topbar {
    height: 74px;
    padding-left: 22px;
  }
  .tricom-global-search {
    width: 500px;
    max-width: 48vw;
  }

  /* KPI strip */
  .tricom-kpis {
    height: 132px;
    padding: 17px 20px 18px;
    gap: 18px;
  }
  .tricom-kpi {
    min-width: 0;
    height: 96px;
    padding: 0 28px;
    box-sizing: border-box;
  }

  /* Native Traccar workspace: reserve a proper device-list column.
     This fixes the blank white strip seen in v4. */
  body.tricom-authenticated #root {
    left: var(--tricom-side) !important;
    top: calc(var(--tricom-top) + var(--tricom-kpi)) !important;
  }

  body.tricom-authenticated .MuiDrawer-paper {
    width: var(--tricom-device-panel) !important;
    min-width: var(--tricom-device-panel) !important;
    max-width: var(--tricom-device-panel) !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
  }

  /* Common Traccar split-pane / drawer containers */
  body.tricom-authenticated [class*="drawer"] {
    max-width: var(--tricom-device-panel);
  }

  /* Give the map the remainder of the available workspace */
  body.tricom-authenticated .maplibregl-map,
  body.tricom-authenticated .mapboxgl-map {
    min-height: 100% !important;
  }

  /* Hide the legacy bottom navigation only on desktop */
  body.tricom-authenticated .MuiBottomNavigation-root {
    display: none !important;
  }
}


/* =========================================================
   TRICOM v4.2 - actual device panel + viewport corrections
   ========================================================= */
@media (min-width:1001px) {
  :root {
    --tricom-side: 280px;
    --tricom-top: 74px;
    --tricom-kpi: 132px;
    --tricom-device-panel: 350px;
  }

  /* Avoid duplicated "FLEET MONITORING" under the logo image. */
  .tricom-side-logo div { display:none !important; }
  .tricom-side-logo { height:105px !important; padding-top:15px !important; }
  .tricom-side-logo img { height:72px !important; }

  /* Fit complete LUCBITZ footer on 900px-high desktop displays. */
  .tricom-nav-item { height:46px !important; }
  .tricom-side-brand { min-height:205px !important; padding:14px 20px 12px !important; }
  .tricom-side-brand small { margin-top:12px !important; font-size:8px !important; }
  .tricom-side-brand b { bottom:12px !important; font-size:17px !important; }
  .tricom-side-art { height:160px !important; }

  /* Our real device panel occupies the exact left column from the approved design. */
  .tricom-device-panel {
    position:fixed; z-index:4700;
    left:var(--tricom-side);
    top:calc(var(--tricom-top) + var(--tricom-kpi));
    bottom:0;
    width:var(--tricom-device-panel);
    background:#fff;
    border-right:1px solid #e1e9f4;
    box-shadow:3px 0 12px rgba(8,43,111,.06);
    overflow:hidden;
  }
  .tricom-device-tabs {
    height:48px; display:grid; grid-template-columns:repeat(3,1fr);
    border-bottom:1px solid #e3ebf5;
  }
  .tricom-device-tabs button {
    border:0; background:#fff; color:#0b2f6b; font-weight:600; cursor:pointer;
    border-bottom:3px solid transparent;
  }
  .tricom-device-tabs button.active { color:#0b66e8; border-bottom-color:#0b66e8; }
  .tricom-device-search {
    height:42px; margin:10px 12px; border:1px solid #cbd9eb; border-radius:8px;
    display:flex; align-items:center; gap:8px; padding:0 11px; color:#0b55bc;
  }
  .tricom-device-search input { border:0; outline:0; width:100%; font-size:14px; }
  .tricom-device-list { overflow:auto; height:calc(100% - 110px); padding:0 7px 12px; }
  .tricom-device-row {
    width:100%; min-height:63px; border:0; background:#fff; display:flex; align-items:center;
    gap:10px; padding:8px 8px; text-align:left; cursor:pointer; border-bottom:1px solid #edf2f8;
  }
  .tricom-device-row:hover { background:#f4f8ff; }
  .tricom-status { width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
  .tricom-status.online { background:#13bf3b; }
  .tricom-status.offline { background:#ff3035; }
  .tricom-car { font-size:24px; color:#0b5bc8; width:30px; text-align:center; }
  .tricom-device-copy { min-width:0; flex:1; }
  .tricom-device-copy b { display:block; color:#082b6f; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tricom-device-copy small { display:block; color:#60789d; margin-top:4px; font-size:12px; }
  .tricom-more { color:#082b6f; font-size:21px; }
  .tricom-empty { padding:30px 15px; text-align:center; color:#7185a4; }

  /* Shift the actual Traccar workspace/map right of our custom device panel. */
  body.tricom-authenticated #root {
    left:calc(var(--tricom-side) + var(--tricom-device-panel)) !important;
    width:auto !important;
  }

  /* Hide Traccar's own desktop drawer because v4.2 renders its live device list itself. */
  body.tricom-authenticated #root .MuiDrawer-root,
  body.tricom-authenticated #root .MuiDrawer-paper {
    display:none !important;
  }
}


/* =========================================================
   TRICOM v4.3 - MAP PRIORITY / COMPACT DESKTOP LAYOUT
   Narrow sidebar + narrow top dashboard + narrower device list
   ========================================================= */
@media (min-width:1001px) {
  :root {
    --tricom-side: 170px !important;
    --tricom-top: 68px !important;
    --tricom-kpi: 0px !important;
    --tricom-device-panel: 280px !important;
  }

  /* COMPACT LEFT MENU */
  .tricom-sidebar {
    width: var(--tricom-side) !important;
  }
  .tricom-side-logo {
    height: 72px !important;
    padding: 9px 10px 4px !important;
  }
  .tricom-side-logo img {
    width: 145px !important;
    height: 50px !important;
    object-fit: contain !important;
  }
  .tricom-side-logo div { display:none !important; }

  .tricom-nav {
    padding: 4px 8px !important;
  }
  .tricom-nav-item {
    height: 47px !important;
    border-radius: 7px !important;
    padding: 0 11px !important;
    gap: 10px !important;
    font-size: 15px !important;
  }
  .tricom-nav-icon {
    width: 25px !important;
    font-size: 19px !important;
  }

  .tricom-side-brand {
    min-height: 86px !important;
    padding: 13px 14px !important;
  }
  .tricom-side-brand strong {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .tricom-side-brand small,
  .tricom-side-brand b,
  .tricom-side-art {
    display:none !important;
  }

  /* SINGLE COMPACT TOP DASHBOARD */
  .tricom-topbar {
    left: var(--tricom-side) !important;
    height: var(--tricom-top) !important;
    padding: 0 15px !important;
    gap: 12px !important;
  }
  .tricom-global-search {
    width: 390px !important;
    max-width: 32vw !important;
    height: 42px !important;
    flex: 0 1 390px !important;
  }
  .tricom-top-right {
    gap: 9px !important;
    margin-left:auto !important;
  }
  .tricom-avatar {
    width: 36px !important;
    height: 36px !important;
  }
  .tricom-user-name {
    margin-right: 10px !important;
    font-size: 14px !important;
  }
  .tricom-date {
    padding-left: 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* Move the four KPIs into the same top row */
  .tricom-kpis {
    z-index: 4950 !important;
    left: calc(var(--tricom-side) + 405px) !important;
    right: 360px !important;
    top: 0 !important;
    height: var(--tricom-top) !important;
    padding: 9px 8px !important;
    gap: 8px !important;
    background: transparent !important;
    pointer-events:none;
  }
  .tricom-kpi {
    height: 50px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    gap: 10px !important;
    border-radius: 8px !important;
    pointer-events:auto;
  }
  .tricom-kpi-number {
    font-size: 17px !important;
    line-height: 18px !important;
  }
  .tricom-kpi small {
    font-size: 11px !important;
    margin-top: 1px !important;
  }
  .tricom-kpi-icon,
  .tricom-bars {
    font-size: 23px !important;
  }
  .tricom-dot {
    width: 18px !important;
    height: 18px !important;
  }

  /* NARROW DEVICE LIST */
  .tricom-device-panel {
    left: var(--tricom-side) !important;
    top: var(--tricom-top) !important;
    width: var(--tricom-device-panel) !important;
  }
  .tricom-device-tabs {
    height: 43px !important;
  }
  .tricom-device-tabs button {
    font-size: 12px !important;
  }
  .tricom-device-search {
    height: 38px !important;
    margin: 8px 10px !important;
  }
  .tricom-device-row {
    min-height: 58px !important;
    padding: 6px 7px !important;
  }
  .tricom-device-copy b { font-size: 13px !important; }
  .tricom-device-copy small { font-size: 11px !important; }
  .tricom-car { font-size: 21px !important; width: 26px !important; }

  /* MAP GETS THE REMAINING MAXIMUM AREA */
  body.tricom-authenticated #root {
    left: calc(var(--tricom-side) + var(--tricom-device-panel)) !important;
    top: var(--tricom-top) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  body.tricom-authenticated #root > div,
  body.tricom-authenticated .maplibregl-map,
  body.tricom-authenticated .mapboxgl-map {
    height:100% !important;
    min-height:100% !important;
  }
}

/* At smaller desktop widths, hide date/user text before sacrificing map. */
@media (min-width:1001px) and (max-width:1350px) {
  .tricom-date,
  .tricom-user-name { display:none !important; }
  .tricom-kpis { right:110px !important; }
  .tricom-global-search { width:320px !important; max-width:28vw !important; }
}


/* TRICOM v4.4 - working device three-dot action menu */
.tricom-more {
  cursor:pointer !important;
  user-select:none;
  width:28px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:6px;
}
.tricom-more:hover { background:#eaf2ff; }

.tricom-device-menu {
  position:fixed;
  z-index:10000;
  width:165px;
  padding:6px;
  background:#fff;
  border:1px solid #dbe5f2;
  border-radius:9px;
  box-shadow:0 10px 30px rgba(5,35,80,.20);
}
.tricom-device-menu button {
  width:100%;
  height:36px;
  border:0;
  border-radius:6px;
  background:#fff;
  color:#082b6f;
  text-align:left;
  padding:0 11px;
  cursor:pointer;
  font-size:13px;
}
.tricom-device-menu button:hover { background:#eef5ff; color:#0b66e8; }


/* =========================================================
   TRICOM v4.5 - narrower device list / more map space
   Stable baseline: v4.4
   ========================================================= */
@media (min-width:1001px) {
  :root {
    --tricom-device-panel: 230px !important;
  }

  .tricom-device-panel {
    width:230px !important;
  }

  .tricom-device-tabs button {
    font-size:11px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }

  .tricom-device-search {
    margin-left:8px !important;
    margin-right:8px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .tricom-device-row {
    gap:7px !important;
    padding-left:6px !important;
    padding-right:5px !important;
  }

  .tricom-car {
    width:23px !important;
    font-size:19px !important;
  }

  .tricom-device-copy b {
    font-size:12.5px !important;
  }

  .tricom-device-copy small {
    font-size:10.5px !important;
  }

  .tricom-more {
    width:25px !important;
  }

  body.tricom-authenticated #root {
    left:calc(var(--tricom-side) + 230px) !important;
  }
}


/* =========================================================
   TRICOM v4.6 - functional account/avatar menu
   ========================================================= */
.tricom-avatar {
  border:0 !important;
  cursor:pointer !important;
  font-family:inherit;
  flex:0 0 auto;
}
.tricom-avatar:hover {
  box-shadow:0 0 0 4px rgba(11,102,232,.12);
}
.tricom-account-menu {
  position:fixed;
  z-index:12000;
  width:230px;
  padding:7px;
  background:#fff;
  border:1px solid #dbe5f2;
  border-radius:10px;
  box-shadow:0 14px 36px rgba(5,35,80,.22);
  color:#082b6f;
}
.tricom-account-head {
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 9px 9px;
}
.tricom-account-big-avatar {
  width:39px;
  height:39px;
  border-radius:50%;
  background:#07398c;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:17px;
}
.tricom-account-head b {
  display:block;
  font-size:14px;
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tricom-account-head small {
  display:block;
  margin-top:3px;
  color:#7185a4;
  font-size:11px;
}
.tricom-account-separator {
  height:1px;
  background:#e6edf6;
  margin:4px 3px;
}
.tricom-account-menu button {
  width:100%;
  height:37px;
  border:0;
  border-radius:6px;
  background:#fff;
  color:#082b6f;
  text-align:left;
  padding:0 11px;
  cursor:pointer;
  font-size:13px;
}
.tricom-account-menu button:hover {
  background:#eef5ff;
  color:#0b66e8;
}
.tricom-account-menu button.logout {
  color:#d32626;
}
.tricom-account-menu button.logout:hover {
  background:#fff1f1;
  color:#b71919;
}


/* =========================================================
   TRICOM v4.6.1 - BOTTOM LEFT REDESIGN
   Exact visual reference supplied by user.
   Baseline preserved: v4.6 account-menu build.
   ========================================================= */
@media (min-width:1001px) {
  .tricom-side-brand {
    display:block !important;
    margin-top:auto !important;
    padding:0 !important;
    min-height:205px !important;
    height:205px !important;
    border-top:1px solid rgba(255,255,255,.18) !important;
    background:
      url('/tricom-sidebar-bottom-reference.jpg')
      center bottom / 100% auto no-repeat !important;
    overflow:hidden !important;
  }

  /* The supplied reference already contains these elements exactly,
     so suppress duplicate HTML text/art from the baseline. */
  .tricom-side-brand > strong,
  .tricom-side-brand > small,
  .tricom-side-brand > b,
  .tricom-side-brand > .tricom-side-art {
    display:none !important;
  }
}


/* =========================================================
   TRICOM v4.6.2 - FULL-WIDTH TOP-LEFT BANNER
   Baseline: user-uploaded v4.6.1
   Goal: maximize TRICOM banner width with zero side margin.
   ========================================================= */
@media (min-width:1001px) {
  /* Remove padding/margins from the sidebar logo/brand wrapper */
  .tricom-sidebar .tricom-logo,
  .tricom-sidebar .tricom-brand,
  .tricom-sidebar-logo,
  .tricom-side-logo,
  .tricom-logo,
  .tricom-brand {
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  /* Make the actual banner image touch both sidebar edges */
  .tricom-sidebar .tricom-logo img,
  .tricom-sidebar .tricom-brand img,
  .tricom-sidebar-logo img,
  .tricom-side-logo img,
  .tricom-logo img,
  .tricom-brand img {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
  }
}