/* Layout fixes for narrower screens.

   Loaded after the prototype's stylesheets, which stay verbatim. Nothing
   here changes colours, type or spacing - it only stops content spilling
   out of its container when the window is narrower than the prototype was
   drawn for. */

/* ---- topbar: nothing may squeeze the search box out of existence ---- */
.search-shell { min-width: 150px; flex-shrink: 1; }
/* The badge keeps its full text; the search box gives way first. It only
   truncates on narrow windows (see the media query below). */
#sap-status { flex-shrink: 0; }
#sap-status-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#role-select, .role-select { max-width: 230px; text-overflow: ellipsis; }

@media (max-width: 1150px) {
  /* The console button keeps its badge but drops its label. */
  #console-toggle { font-size: 0; gap: 0; }
  #console-toggle .icon, #console-toggle .badge { font-size: 12px; }
  #console-toggle .badge { margin-left: 6px; }
  #role-select, .role-select { max-width: 170px; }
  #sap-status { flex-shrink: 1; min-width: 0; max-width: 170px; }
}

/* ---- tab bars scroll sideways instead of spilling ---- */
.tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tabs .tab { flex: 0 0 auto; white-space: nowrap; }

/* ---- wide tables get their own horizontal scroll (see 95-layout.js) ---- */
.tbl-scroll { overflow-x: auto; max-width: 100%; }
.tbl-scroll > table { min-width: 100%; }

/* ---- grids ----
   The prototype collapses .grid-4 / .grid-3 below 1100px, but its VIMS
   copy of that rule was written as `.vims-scope @media (...)`, which
   browsers discard, and its more specific selectors then override the core
   rule. This restores the intended behaviour for every grid. */
@media (max-width: 1100px) {
  .vims-scope .grid-4, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vims-scope .grid-3, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .grid-4, .grid-3, .grid-2,
  .vims-scope .grid-4, .vims-scope .grid-3, .vims-scope .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Grid children must be allowed to shrink below their content width. */
.grid > * { min-width: 0; }

/* Long unbroken values (GSTINs, links, hashes) wrap instead of widening a card. */
#main-inner .card { overflow-wrap: anywhere; }
#main-inner .card table { overflow-wrap: normal; }

/* ---- polish ---------------------------------------------------------------
   A generic `input` rule loaded later overrides the prototype's search-box
   padding, so the placeholder ran under the magnifier icon. */
.search-shell input,
.list-search input { padding-left: 34px !important; }
.list-search { position: relative; }

/* The red "alert" badge was taller than the others and made its menu row
   jump by ~12px. All sidebar rows now share one height. */
.navlink { min-height: 38px; }
.navlink .nbadge, .navlink .nbadge.alert {
  line-height: 18px; height: 18px; min-width: 18px; padding: 0 6px;
  animation: none; margin-top: 0; margin-bottom: 0;
}

/* Header controls stay on one line. */
#console-toggle, .avatar-chip, .avatar-chip * { white-space: nowrap; }
.avatar-chip { flex-shrink: 0; }

/* Empty numeric cells read as a dash, not "null". */
td:empty::after { content: "–"; color: var(--muted); }

/* Dashboard banner: breathing room between the text and its buttons. */
.hero p { margin-bottom: 14px; }

/* Email, password, phone, URL and search boxes get the same look as text
   boxes - the prototype's rule only listed text/file/date/number. */
input[type=email], input[type=password], input[type=tel], input[type=url], input[type=search] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; background: var(--surface-1); color: var(--text-primary); font-family: inherit;
}
input[type=email]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=url]:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(42,86,214,0.13);
}

/* ---- phones (<= 760px) ----------------------------------------------------
   The shell was drawn for desktops: the 252px sidebar stayed open and squeezed
   every screen into ~140px, and the header ran off the right edge. On a phone
   the sidebar becomes an overlay that the header button opens (the same button
   and the same "collapsed" state the desktop uses, read the other way round:
   hidden by default, shown when toggled), and secondary header controls hide. */
@media (max-width: 760px) {
  #topbar { padding: 0 10px; gap: 8px; }
  #topbar .brand { font-size: 0; gap: 0; }
  #topbar .brand .mark { font-size: 13px; }
  #topbar .spacer { display: none; }
  .search-shell { flex: 1 1 auto; min-width: 0; max-width: none; width: auto; }
  #sap-status, #console-toggle, #role-select, #vendor-account-select, #user-name-chip { display: none !important; }

  #sidebar {
    position: fixed; top: 60px; bottom: 0; left: 0; z-index: 40;
    width: 252px; transform: translateX(-100%);
    transition: transform .2s var(--ease); box-shadow: none;
  }
  #sidebar.collapsed {
    width: 252px; transform: translateX(0); box-shadow: 0 12px 40px rgba(0,0,0,.35);
  }
  /* the desktop "icons only" look must not apply to the phone overlay */
  #sidebar.collapsed #sidebar-search-wrap { display: block; }
  #sidebar.collapsed .navlink .lbl, #sidebar.collapsed .navlink .nbadge { display: inline; }
  #sidebar.collapsed .navlink { justify-content: flex-start; padding: 9px 14px; margin: 1px 8px; }
  #sidebar.collapsed .navlink .nbadge { margin-left: auto; }
  #sidebar.collapsed .nav-group-head { justify-content: flex-start; padding: 9px 14px; }
  #sidebar.collapsed .nav-group-head span.gtext, #sidebar.collapsed .nav-group-head .chev { display: inline; }

  #main { padding: 16px 12px 80px; }
  .page-title { font-size: 20px; }
  .modal { width: calc(100vw - 20px) !important; max-width: none !important; }
}