/* =========================================================
   Truckers Helper UI Utilities (modernized + legacy merge)
   ========================================================= */

/* Palette + small UI helpers */
:root {
  --primary:#0B3D2E;
  --primary-ink:#ecf0f1;
  --ink:#222;
  --muted:#6b7280;
  --shell-w:900px; /* unified content rail for banner/menu */
}

/* ---------- Generic button ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .9rem; border-radius:.5rem;
  border:1px solid transparent; background:var(--primary); color:var(--primary-ink);
  font:600 13px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-decoration:none; cursor:pointer; user-select:none;
  transition:filter .15s ease,opacity .15s ease;
}
.btn:hover{filter:brightness(1.1);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn--sm{padding:.35rem .6rem;font-size:12px;border-radius:.375rem;}
.btn--ghost{background:transparent;color:var(--primary);border-color:var(--primary);}
.btn--light{background:#f3f4f6;color:#111827;border-color:#e5e7eb;}

/* ---------- Brand area ---------- */
.brand-logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;}
.brand-logo img{max-height:56px;height:auto;width:auto;display:block;}

/* ---------- Auth button cluster ---------- */
.auth-actions{display:flex;gap:.5rem;align-items:center;}
.auth-actions .btn{white-space:nowrap;}

/* ---------- Base layout helpers ---------- */
.BASE{min-height:100vh;display:flex;flex-direction:column;align-items:center;}
.BASE--logo{width:var(--shell-w);max-width:100vw;margin:0 auto;padding-top:10px;
  display:flex;flex-direction:column;align-items:flex-start;}
.BASE--menu{width:var(--shell-w);max-width:100vw;margin:0 auto;display:flex;align-items:center;}
.main-content{width:var(--shell-w);max-width:100vw;margin:0 auto;}
.clear{clear:both;display:block;}
.hide{display:none;visibility:visible;}

/* ---------- Top menu / hero skins ---------- */
#top-menu{
  background-image:url(/images/Truckers-03.jpg);
  background-repeat:repeat-x;
  height:23px;
  padding-top:5px;
  width:var(--shell-w);
  margin:0 auto;
  position:relative;
}
#hero-row{position:relative;width:var(--shell-w);min-height:191px;margin:0 auto;}
#banner{
  background-image:url(/images/Truckers-06.jpg);
  background-repeat:repeat-x;
  height:191px;
  width:100%;
  position:relative;
  display:flex;
  align-items:flex-start;
}
.active{color:#2A4615;font:700 12px Arial,Helvetica,sans-serif;display:block;float:left;
  background-image:url(/images/menu-active-02.jpg);background-repeat:repeat-x;height:20px;padding-top:5px;}
.acive-left{background-image:url(/images/menu-active-left.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}
.acive-right{background-image:url(/images/menu-active-right.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}
.inactive{color:#fff;font:400 12px Arial,Helvetica,sans-serif;display:block;float:left;
  background-image:url(/images/inactive-02.jpg);background-repeat:repeat-x;height:20px;padding-top:5px;}
.inacive-left{background-image:url(/images/inactive-left.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}
.inacive-right{background-image:url(/images/inactive-right.jpg);width:5px;height:25px;background-repeat:no-repeat;display:block;float:left;}

/* ---------- Announcement strips ---------- */
.announce{width:655px;margin-top:25px;padding-left:70px;float:left;margin-bottom:25px;margin-right:5px;}
.announce-banner{height:39px;width:180px;background-image:url(/images/Truckers-21.jpg);background-repeat:no-repeat;float:left;display:block;}
.announce-left{height:39px;width:7px;background-image:url(/images/Truckers-20.jpg);background-repeat:no-repeat;display:block;float:left;}
.announce-spacer{height:39px;width:450px;background-image:url(/images/Truckers-22.jpg);background-repeat:repeat-x;display:block;float:left;}
.announce-right{height:39px;width:7px;background-image:url(/images/Truckers-23.jpg);background-repeat:no-repeat;display:block;float:left;}
.announce-text2{font-size:10pt;margin:15px 10px;}
.announcement-header{font-size:14px;font-weight:400;color:#DF8300;text-decoration:underline;}

/* =========================================================
   Masthead alignment patch (banner + top menu)
   ========================================================= */
.masthead{display:flex;flex-direction:column;align-items:center;margin:0 auto;padding:0;}
.masthead .BASE--logo,
.masthead .BASE--menu{
  width:var(--shell-w);
  max-width:100%;
  margin:0 auto;
  padding:0;
}
.masthead .BASE--logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.masthead .BASE--menu{
  position:relative;
  top:-3px;           /* pull up menu flush with banner */
  margin-top:0;
}
#top-menu, ul.top-menu, #banner{
  transform:translateZ(0);
}

/* Reset legacy UL menu quirks */
ul.top-menu, .main-menu ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:0px;
}
ul.top-menu>li{margin:0;padding:0;}
.main-menu{background:#0B3D2E;width:var(--shell-w);margin:0 auto;box-sizing:border-box;}
.main-menu ul li a{text-decoration:none;}
.main-menu ul li a:hover{text-decoration:underline;}

/* Workflow accordion pinned to right of banner */
#workflow_accordian{position:absolute;right:0;top:0;}