/* (c) Kala Rakhi. Private software - copying prohibited. */
/* =======================================================================
   29-09-2026 (owner): THE MENUS IN WORDS, ON EVERY SCREEN AND EVERY LOOK.
   - no icons in the main menu (modules), the second row (screens) and the phone lists;
   - the quick-access icon buttons leave the second row (they stay in the logo menu);
   - no counter on the Configure button, no coloured dot before the page title;
   - phone: the module row is one button with the open module's name — tapping it lists
     every module (lib/ui.php renders it; the ribbon script opens and closes it);
   - PC: resting the cursor on a module shows its screens with their keyboard keys, and on a
     screen shows its key (assets/app.js — MENU HOVER).
   ======================================================================= */
.ribbon .rtab>svg,.ribbon .ritem>svg,.rbot a>svg,.rsheet a>svg,.rsheet .ic{display:none!important}
html.rib .rtab>span,html.rib .rtab:not(.on)>span{display:inline!important}
html.rib .rtab,html.rib .rtab.on{gap:0!important}
.ribbon .oqat{display:none!important}
.ribbon .rpanel,.ribbon .rpanel.on{padding-left:14px!important;padding-right:14px!important}
#cfgbadge{display:none!important}
.crumb>.mdot{display:none!important}
.crumb .oqpin{opacity:0;transition:opacity .15s}
.crumb:hover .oqpin,.crumb .oqpin:focus-visible{opacity:.55}
html.rib .rtab.on::after,html.rib .rtab.on::before,.ribbon .rpanel.anch::before{display:none!important}
/* even letter spacing at every size (the page is zoomed) and the work area right under the bars */
html body,html body *{text-rendering:geometricPrecision}
html.rib .main{margin-top:calc(var(--top) / var(--ozoom,1))!important}
/* the STATUS panel on the right (PC only) never covers the page (it is not zoomed, the page is) */
@media (min-width:1100px){body.has-kpirail.has-kpirail .main{padding-right:calc((var(--railw,236px) + 14px) / var(--ozoom,1))!important}}

/* ---- phone: the module button and the list of modules ---- */
.pxmod,.pxsheet{display:none}
@media (max-width:760px){
  html.rib .rtabs .rtab{display:none!important}
  .pxmod{display:inline-flex;align-items:center;gap:6px;height:36px;align-self:center;padding:0 12px;margin:0 auto 0 2px;border:0;border-radius:12px;
    background:color-mix(in srgb,var(--c,#6a54f0) 12%,#fff);color:color-mix(in srgb,var(--c,#6a54f0) 82%,#111);font-size:16px;font-weight:600;cursor:pointer;flex:none;max-width:52vw}
  .pxmod span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pxmod i{font-style:normal;font-size:12px;opacity:.65}
  body.pxopen .pxsheet{display:flex;position:fixed;inset:0;z-index:60;background:rgba(15,23,42,.35);align-items:flex-start}
  .pxsin{width:100%;max-height:calc(100vh - 70px);overflow:auto;background:#fff;margin-top:56px;padding:12px 14px 16px;border-radius:0 0 22px 22px;
    display:grid;grid-template-columns:1fr 1fr;gap:8px;box-shadow:0 12px 30px rgba(0,0,0,.15)}
  .pxsh{grid-column:1/-1;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;padding:2px 6px}
  .pxsin a{padding:12px 12px;border-radius:14px;font-size:15px;font-weight:500;text-decoration:none;
    color:color-mix(in srgb,var(--c,#6a54f0) 82%,#111);background:color-mix(in srgb,var(--c,#6a54f0) 10%,#fff)}
  .pxsin a.on{background:color-mix(in srgb,var(--c,#6a54f0) 22%,#fff);font-weight:600}
}

/* ---- PC: rest the cursor on a module — its screens and keys; on a screen — its key ---- */
.pxfly,.pxtip{display:none}
@media (min-width:761px){
  .pxfly.on{display:block;position:fixed;z-index:90;width:300px;background:#fff;border-radius:14px;padding:6px;
    box-shadow:0 18px 40px -14px rgba(30,33,64,.38),0 0 0 1px rgba(30,33,64,.07)}
  .pxfh{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#62667f}
  .pxfh b{font-weight:600}
  .pxfly a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:10px;font-size:13.5px;color:#1e2140;text-decoration:none}
  .pxfly a:hover,.pxfly a:focus-visible{background:color-mix(in srgb,var(--c,#6a54f0) 10%,#fff);outline:0}
  .pxfly a.on{color:color-mix(in srgb,var(--c,#6a54f0) 82%,#111);font-weight:600}
  .pxfly kbd,.pxtip kbd{font-family:inherit;font-size:11px;font-weight:600;line-height:1;padding:4px 7px;border-radius:7px;background:#f3f2f8;color:#55597a;border:1px solid #e7e4f3;white-space:nowrap}
  .pxff{display:flex;justify-content:space-between;gap:8px;margin:4px 4px 2px;padding:8px 6px 4px;border-top:1px solid #f0eef6;font-size:11.5px;color:#9a9db5}
  .pxff span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
  .pxff kbd{font-family:inherit;font-size:10.5px;font-weight:600;line-height:1;padding:3px 5px;border-radius:6px;background:#f6f5fb;color:#7a7e98;border:1px solid #ecebf3}
  .pxtip.on{display:flex;align-items:center;gap:8px;position:fixed;z-index:91;transform:translateX(-50%);background:#1e2140;color:#fff;font-size:12px;font-weight:500;
    padding:6px 8px 6px 10px;border-radius:9px;pointer-events:none;box-shadow:0 8px 20px -8px rgba(30,33,64,.6)}
  .pxtip kbd{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.2)}
}
@media print{.pxmod,.pxsheet,.pxfly,.pxtip,.pxmore,.pxmm{display:none!important}}

/* ---- PC: THE MAIN ROW NEVER HIDES A MODULE (29-09 fix, owner: "Settings missing in main menu").
   Tighter spacing on smaller screens; whatever still does not fit goes under "More" at the end
   of the row — never the open module (assets/app.js — MENU FIT). ---- */
@media (min-width:761px) and (max-width:1440px){html.rib .rtab{padding:0 9px!important}}
@media (min-width:761px) and (max-width:1280px){html.rib .rtab{padding:0 7px!important;font-size:13px!important}}
@media (min-width:761px) and (max-width:1100px){html.rib .rtab{padding:0 6px!important;font-size:12.5px!important}}
html.rib .rtabs .rtab.pxhid{display:none!important}
.pxmore,.pxmm{display:none}
@media (min-width:761px){
  html.rib .rtabs .pxmore:not([hidden]){display:inline-flex;align-items:center;gap:5px;flex:none;align-self:center;height:34px;padding:0 11px;margin:0 2px;
    border:0;border-radius:11px;background:none;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink2,#3d4060);cursor:pointer;white-space:nowrap}
  html.rib .rtabs .pxmore i{font-style:normal;font-size:11px;opacity:.6}
  html.rib .rtabs .pxmore:hover,html.rib .rtabs .pxmore.open{background:color-mix(in srgb,var(--acc,#6a54f0) 9%,#fff);color:var(--ink,#1e2140)}
  html.rib .rtabs .pxmore.lit{background:color-mix(in srgb,var(--acc,#6a54f0) 13%,#fff);color:color-mix(in srgb,var(--acc,#6a54f0) 82%,#111);font-weight:600}
  .pxmm.on{display:grid;position:fixed;z-index:92;gap:4px 18px;background:#fff;border-radius:14px;padding:10px 12px 8px;
    max-height:calc(100vh - 70px);overflow:auto;box-shadow:0 18px 40px -14px rgba(30,33,64,.38),0 0 0 1px rgba(30,33,64,.07)}
  .pxmm .pxmc{min-width:0}
  .pxmm .pxmh{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
    color:color-mix(in srgb,var(--c,#6a54f0) 82%,#111);text-decoration:none}
  .pxmm .pxmh:hover{background:color-mix(in srgb,var(--c,#6a54f0) 10%,#fff)}
  .pxmm .pxmh::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,#6a54f0);flex:none}
  .pxmm .pxmi{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px;border-radius:9px;font-size:13.5px;color:#1e2140;text-decoration:none}
  .pxmm .pxmi:hover,.pxmm .pxmi:focus-visible{background:color-mix(in srgb,var(--c,#6a54f0) 10%,#fff);outline:0}
  .pxmm .pxmi.on{color:color-mix(in srgb,var(--c,#6a54f0) 82%,#111);font-weight:600}
  .pxmm kbd{font-family:inherit;font-size:11px;font-weight:600;line-height:1;padding:4px 7px;border-radius:7px;background:#f3f2f8;color:#55597a;border:1px solid #e7e4f3;white-space:nowrap}
}

/* ---- the key list (Ctrl + /): a key for every screen now, listed module by module as in the menus;
   it scrolls, and on a PC it is wider, in columns ---- */
#schelp .schelpbox{max-height:calc(100vh - 36px);overflow-y:auto;overscroll-behavior:contain}
#schelp .schmod{break-inside:avoid;margin:0 0 12px}
#schelp .schmod h5{margin:6px 0 2px;font-size:13px;font-weight:600;color:var(--ink,#1e2140)}
#schelp .schmod .schelprow{padding:4px 2px}
#schelp kbd{font-family:inherit;font-weight:600;letter-spacing:.02em}
@media (min-width:900px){
  #schelp .schelpbox{width:min(980px,100%)}
  #schelp .schmods{column-count:3;column-gap:28px}
  #schelp .schelpgrp:not(.schmenu){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
  #schelp .schelpgrp:not(.schmenu) h4{grid-column:1/-1}
}
@media (min-width:600px) and (max-width:899px){#schelp .schmods{column-count:2;column-gap:24px}}

/* ---- login (29-09, owner): the staff list is never clipped — every name shows, one under the other on a phone ---- */
.demolist{max-height:none!important;overflow:visible!important}
.demolist button{font-size:12px!important;line-height:1.3}
@media (max-width:560px){.demolist{grid-template-columns:1fr!important}}

/* ---- 30-09 (owner): PHONE — nothing hidden, nothing cut ----
   1. "My work" mode (one slim bar with the person's own screens beside the logo) keeps ONE bar of 48px
      in this look too: the module bar is not added under it, and the page starts right below the bar. */
@media (max-width:760px){
  html.rib body.mywork #ribbon{height:48px!important;min-height:0!important}
  html.rib body.mywork .rtabs{height:48px!important}
  html.rib body.mywork .rtabs .pxmod,html.rib body.mywork .rcur{display:none!important}
  html.rib body.mywork nav.ribbon .rpanel.on{top:0!important;height:48px!important;left:54px!important;right:100px!important;padding:0 4px!important;background:transparent!important}
  html.rib body.mywork main.main{margin-top:calc(48px / var(--ozoom,1))!important}
  /* 2. photo cards: a smaller photo leaves room for the words; the colour chip drops to the next line
        instead of being squeezed; the big number is never pushed off the card; a line of text wraps
        instead of ending in "…" */
  .pcard.pch,.pcard:has(>.rimg+.rbody),.rcard,.plcards .pcard{--pci:104px}
  .pcard .rtop,.rcard .rtop{flex-wrap:wrap!important;row-gap:2px}
  .pcard .rtop .rp,.rcard .rtop .rp{flex:none;margin-left:auto;max-width:100%;white-space:nowrap}
  .pcard .rtl,.rcard .rtl{flex:1 1 auto;flex-wrap:wrap;overflow:visible!important}
  .pcard .rtl .colchip,.rcard .rtl .colchip{flex:0 1 auto;max-width:100%}
  .pcard .rbody>.rl:not(.rtop)>span:first-child{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
  /* 3. the phone's own text-size boost does not blow the layout: the ERP sets its size (its zoom slider stays) */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
}