/* ═══════════════════════════════════════════════════════════════════════════
   APP SHELL — header corrections
   Loaded after style.css so these win without adding more !important than the
   rules they are correcting already carry.

   THE BUG, MEASURED
   style.css:3690 hides BOTH the sidebar and the header title in one
   @media (max-width: 768px) block. At 769px they therefore both return at the
   same instant: the sidebar takes 230px and the title is left with whatever
   remains. Measured on the CIBIL page:

       375px  header  60px   title hidden        OK
       790px  header 271px   title  99px, 4 lines
       834px  header 271px   title  99px, 4 lines   (iPad Air portrait)
       960px  header 252px   title 134px, 4 lines
      1280px  header 137px   title 318px, 2 lines

   271px is 30% of an 812px screen, on a sticky element. The phone layout was
   never the problem; everything from tablet to laptop was.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The row never wraps into a stack, and never grows past one line of chrome. */
.top-header{
  flex-wrap: nowrap !important;
  gap: 10px !important;
  min-height: 60px;
  padding-block: 10px !important;
}

/* The title is the only flexible child, and it is allowed to shrink — without
   min-width:0 a flex item refuses to go below its longest word, which is what
   forced the four-line stack. */
.top-header .header-welcome{
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.top-header #page-title{
  margin: 0;
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-header .header-subtitle{
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-header .header-actions{ flex: 0 0 auto; }
.top-header .app-back{ flex: 0 0 auto; }

/* Hold the title back until the row genuinely fits it. 1100px is where
   230px of sidebar + two nav buttons + the title + the action group stop
   competing — measured, not guessed. */
@media (max-width: 1099px){
  .top-header .header-welcome{ display: none !important; }
}
/* Below 1280 the subtitle is the first thing to go: it repeats the page body
   copy underneath it, so it costs a line and says nothing new. */
@media (max-width: 1279px){
  .top-header .header-subtitle{ display: none; }
}