/* ===== Desktop responsive ladder =====
   Everything in this file is scoped to `min-width: 761px`, so the mobile shell
   (`max-width: 760px`, css/mobile*.css) is never touched by it. The file is
   loaded last on every page that uses it, which lets it win over the fixed
   desktop widths without `!important` - except where the original rule is
   itself `!important` (css/sidebar-account.css does that a lot).

   Background: the only breakpoint in the app used to be the 760px mobile cut.
   Above it every width was hard-coded - logo 383px, ICD tree 430px, drawer
   500px, account sidebar 288px - so a window that was not maximised overflowed
   the topbar, and the tree ate half the page.

   The bands, widest first:
     A  761px and up  - fluid widths, and the pieces that may give way
     B  up to 1500px  - trim the account card and the spacing
     C  up to 1240px  - the layers flyout becomes a normal dropdown
     D  up to 1100px  - the classification CTA switches to its short label
     E  up to 1040px  - shrink the logo and the pills, drop the patient name
     F  up to  900px  - drop what is decorative; the ICD tree also
                        auto-collapses here, which page JS handles
*/

/* The short CTA label only shows inside band D and below. */
.adv-diag-btn .adv-diag-short{ display: none; }

/* ---------- A: everything from 761px up ---------- */
@media (min-width: 761px){

  :root{
    /* Left ICD tree. Consumed by css/style.css (#left, #app), by the inline
       #left override in pl/app.html and by pl/classification*.html. */
    --tree-w: clamp(256px, 30vw, 430px);
    /* Account / settings sidebar - css/shell.css + css/sidebar-account.css. */
    --acct-sidebar-w: clamp(208px, 19vw, 288px);
    /* Horizontal breathing room in both topbars. */
    --topbar-gutter: clamp(14px, 2.2vw, 30px);
  }

  /* Nothing in a topbar may push the bar wider than the window. */
  #topbar,
  .settings-topbar{
    padding-left: var(--topbar-gutter) !important;
    padding-right: var(--topbar-gutter) !important;
    min-width: 0;
  }
  #topbar > *,
  .settings-topbar > *{ min-width: 0; }

  /* The logo block reserved a flat 383px so the divider lined up with the old
     430px sidebar. The reservation now follows the fluid sidebar, and - more
     importantly - it yields: flex-basis keeps the alignment while the bar can
     afford it, flex-shrink gives it up first, and min-width:fit-content stops
     the shrink at the image. That reservation was holding ~140px of empty
     space next to a ~230px logo, which is where the room for the segmented
     toggle comes from.

     classification.html and account.html repeat the 383px in an inline <style>
     that sits after this sheet in the document, so the settings-topbar variant
     needs one extra level of specificity to win. */
  #topbar .logo{
    width: auto;
    flex: 0 1 calc(var(--tree-w) - 47px);
    min-width: fit-content;
  }
  body .settings-topbar > .acc-topbar-logo{
    width: auto !important;
    flex: 0 1 calc(var(--tree-w) - 47px) !important;
    min-width: fit-content !important;
  }

  /* .mode-switch used to be the only shrinkable child of #topbar, so every
     pixel the bar was short came out of the segmented toggle and the two
     labels ended up overlapping the swap icon. The bands below make room
     deliberately instead; the toggle keeps the width it asks for. */
  #topbar .mode-switch,
  .settings-topbar .mode-switch{ flex-shrink: 0; }

  /* The sidebar heading broke mid-token ("ICD-" / "11") once the panel got
     narrow. The code stays on one line; only the name wraps. */
  #left-panel-icd{ white-space: nowrap; }

  /* A long patient name must never be what pushes the bar over the edge. */
  #patient-status{
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
}

/* ---------- B: up to 1500px - trim the account card and the spacing ---------- */
@media (min-width: 761px) and (max-width: 1500px){

  .topbar-divider{ margin: 0 20px 0 14px; }

  .mode-switch{ gap: 16px; margin-right: 4px; }
  .mode-switch button + button{ margin-left: 12px; }

  .mode-switch .mode-seg button{ padding: 0 20px !important; }
  .adv-diag-btn{ padding: 0 16px !important; }

  #patient-status{ max-width: 110px; }

  /* The account card is 244px at its widest, most of it whitespace around a
     short name. This is the cheapest width in the bar to give back. */
  #account-box{ width: clamp(176px, 15vw, 198px); }

  #topbar .controls,
  .controls{ gap: 14px !important; margin-right: 4px; }
}

/* ---------- C: up to 1240px - the layers flyout becomes a dropdown ---------- */
@media (min-width: 761px) and (max-width: 1240px){

  /* The flyout opens sideways into the topbar, which collides with the CTA
     pill once the bar gets tight - and its translucent background made the
     overlap look like stray text floating over the button. Below this width
     it becomes an ordinary dropdown card under its own icon. */
  #layers-dropdown.layers-dropdown{
    top: calc(100% + 12px);
    right: 0;
    left: auto;
    height: auto;
    min-width: 236px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15,23,42,0.12);
    transform: translateY(6px);
  }
  #layers-dropdown.layers-dropdown.open{ transform: translateY(0); }
  #layers-dropdown .layers-card{
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }
  #layers-dropdown .layer-item{ justify-content: space-between; width: 100%; }

  body.dark-mode #layers-dropdown.layers-dropdown{
    background: #1b2333;
    border-color: rgba(96,165,250,0.18);
    box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  }

  /* Classification: tabs stop hugging a 28px gutter. */
  #kl-tabs{ padding-left: 16px; padding-right: 16px; }
}

/* ---------- D: up to 1100px - short CTA label ----------
   The classification CTA is a whole sentence ("Przejdz do trybu zaawansowanej
   diagnozy"). The markup carries a short label beside it; swap which shows. */
@media (min-width: 761px) and (max-width: 1100px){
  .adv-diag-btn .adv-diag-long{ display: none; }
  .adv-diag-btn .adv-diag-short{ display: inline; }
}

/* ---------- E: up to 1040px - shrink the logo and the pills ---------- */
@media (min-width: 761px) and (max-width: 1040px){

  /* Both logo images carry an inline height:44px, hence !important. */
  #topbar .logo img,
  .settings-topbar .acc-topbar-logo img{ height: 36px !important; }

  .topbar-divider{ margin: 0 14px 0 10px; }

  .mode-switch{ gap: 10px; }
  .mode-switch .mode-seg button{ padding: 0 14px !important; font-size: 12.5px; }
  .mode-switch .mode-outline-btn{ padding: 0 14px !important; font-size: 12.5px; }
  .adv-diag-btn{ padding: 0 13px !important; font-size: 12.5px; }

  /* Patient button keeps its icon and its selected-state colour; the name is
     repeated inside the patient panel, so dropping it here costs little. */
  .mode-switch .mode-outline-btn #patient-status{ display: none; }

  /* Clipping the name to "Logowani..." reads worse than not showing it; the
     avatar alone is enough and the full name is in the dropdown. */
  #account-box{ width: auto; }
  #topbar .user-meta,
  .settings-topbar .user-meta{ display: none; }
  .topbar-user{ width: auto; padding: 5px 7px; }

  #topbar .controls,
  .controls{ gap: 11px !important; }
}

/* ---------- F: up to 900px - drop what is decorative ---------- */
@media (min-width: 761px) and (max-width: 900px){

  #topbar .logo img,
  .settings-topbar .acc-topbar-logo img{ height: 31px !important; }

  /* Purely decorative at this width, and it costs 25px. */
  .topbar-divider{ display: none; }
  .topbar-class-btn{ width: 38px; height: 38px; margin-right: 10px; }

  .mode-switch{ gap: 8px; margin-right: 0; }
  .mode-switch .mode-seg{ height: 40px; }
  .mode-switch .mode-seg button{ padding: 0 11px !important; font-size: 12px; }
  .mode-switch .mode-outline-btn{ padding: 0 12px !important; height: 40px; }
  .adv-diag-btn{ height: 40px !important; padding: 0 12px !important; }

  .topbar-user{ padding: 5px; }

  #topbar .controls,
  .controls{ gap: 9px !important; }

  /* Classification centre column: give the content the width back. */
  #kl-tabs{ padding-left: 10px; padding-right: 10px; }
}

/* ---------- ICD tree: collapsed state on classification ----------
   app.html already had a collapse ribbon (css/redesign.css). Classification
   did not, so the equivalent states live here. Both pages auto-collapse below
   900px from page JS; the ribbon stays clickable so it can be brought back. */
@media (min-width: 761px){

  #kl-tree-ribbon{
    position: fixed;
    top: 58%;
    left: var(--tree-w, 430px);
    transform: translateY(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 24px;
    padding: 32px 0;
    border: 1px solid #cbd5e1;
    border-left: none;
    border-radius: 0 10px 10px 0;
    background: #f1f5f9;
    color: #94a3b8;
    cursor: pointer;
    box-shadow: 2px 0 6px rgba(15,23,42,0.04);
    font-family: inherit;
    overflow: hidden;
    transition: left .35s cubic-bezier(.4,0,.2,1), background .18s, color .18s, width .25s ease;
  }
  #kl-tree-ribbon:hover{ background: #e2e8f0; color: #475569; width: 30px; }
  #kl-tree-ribbon:active{ transform: translateY(-50%) scale(0.96); }
  #kl-tree-ribbon .ttr-icon{ font-size: 10px; font-weight: 700; line-height: 1; }
  #kl-tree-ribbon .ttr-label{
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }

  body.kl-tree-collapsed #left{
    width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-right: none;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
  body.kl-tree-collapsed #kl-tree-ribbon{ left: 0; }
  body.kl-tree-collapsed #kl-tree-ribbon .ttr-icon{ transform: rotate(180deg); }

  body.dark-mode #kl-tree-ribbon{
    background: rgba(255,255,255,0.06);
    border-color: rgba(96,165,250,0.22);
    color: #94a3b8;
  }
}

/* The ribbon is a desktop affordance only - mobile has its own drawer + FAB. */
@media (max-width: 760px){
  #kl-tree-ribbon{ display: none !important; }
}

@media (prefers-reduced-motion: reduce){
  #kl-tree-ribbon{ transition: none; }
}