/* Ribua Office - calm & readable layer v1 (Tab, 2026-11-05).
   Loaded by _app/office.html after the app's own CSS. Delete that <link> (and the small ro script) to undo.
   Changes look only: no data, no buttons/fields removed. */
:root{--ro-bg:#F6F2EA;--ro-line:#E6DCC8;--ro-muted:#5E574D;--ro-soft:#756C61;--ro-gold:#B58A45;--ro-head:76px}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* 1. Calm background: plain warm paper instead of the busy photo */
#root>.min-h-screen>.fixed.inset-0.bg-cover{display:none!important}
html:not(.dark) #root>.min-h-screen>.fixed.inset-0.pointer-events-none{background:var(--ro-bg)!important}
html:not(.dark) body{background:var(--ro-bg)}

/* 2. Readable sizes (the smallest text was 10-12px) */
#root .text-\[10px\]{font-size:11.5px!important;line-height:1.3}
#root .text-\[11px\]{font-size:12.5px!important;line-height:1.35}
#root .text-\[11px\].uppercase,#root .text-\[10px\].uppercase{font-size:11.5px!important}
#root .text-xs{font-size:13px!important;line-height:1.4}
#root .text-sm{font-size:14.5px!important;line-height:1.45}
#root main h1{font-weight:700!important;letter-spacing:-.02em}
#root main h2{letter-spacing:-.01em}
#root .tabular-nums,#root td{font-variant-numeric:tabular-nums}

/* 3. Better contrast for grey helper text on light cards (dark cards untouched) */
html:not(.dark) #root .text-stone-400:not(:is([class^="bg-[#1"],[class*=" bg-[#1"],[class^="bg-[#2"],[class*=" bg-[#2"],[class^="bg-[#3"],[class*=" bg-[#3"],[class^="from-[#1"],[class*=" from-[#1"],[class^="from-[#2"],[class*=" from-[#2"],[class^="from-[#3"],[class*=" from-[#3"],[class~="bg-stone-800"],[class~="bg-stone-900"],[class~="bg-black"],[class~="bg-stone-700"],header) *){color:var(--ro-soft)!important}
html:not(.dark) #root .text-stone-500:not(:is([class^="bg-[#1"],[class*=" bg-[#1"],[class^="bg-[#2"],[class*=" bg-[#2"],[class^="bg-[#3"],[class*=" bg-[#3"],[class^="from-[#1"],[class*=" from-[#1"],[class^="from-[#2"],[class*=" from-[#2"],[class^="from-[#3"],[class*=" from-[#3"],[class~="bg-stone-800"],[class~="bg-stone-900"],[class~="bg-black"],[class~="bg-stone-700"],header) *){color:var(--ro-muted)!important}
html:not(.dark) #root input::placeholder,html:not(.dark) #root textarea::placeholder{color:#8d8478!important}

/* 4. Calmer cards: one soft shadow, no entrance animations (pages feel instant) */
html:not(.dark) #root main [class*="shadow-md"],html:not(.dark) #root main [class*="shadow-lg"]:not(button){box-shadow:0 1px 2px rgba(60,45,20,.06),0 6px 18px rgba(60,45,20,.05)!important}
html:not(.dark) #root main section[class*="rounded-2xl"],html:not(.dark) #root main section[class*="rounded-3xl"]{border:1px solid var(--ro-line)}
#root [class*="animate-fade-in-up"]{animation:none!important;opacity:1!important;transform:none!important}

/* 5. Clear status chips */
#root main span[class*="rounded-full"][class*="-100 "],#root main span[class*="rounded-full"][class$="-100"]{font-weight:600!important;letter-spacing:.01em}

/* 6. Tables: comfortable rows; on narrow screens they scroll sideways instead of squashing */
#root main :is(div,section):has(>table){overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
#root main table th{white-space:nowrap}
#root main table td{padding-top:.7rem!important;padding-bottom:.7rem!important}
html:not(.dark) #root main table tbody tr:hover td{background:rgba(181,138,69,.07)}
@media (max-width:767px){#root main table{min-width:640px}}

/* 7. Header: on a phone the search gets its own full-width row (it was squeezed to "Sea...") */
@media (max-width:640px){
 #root header>div{flex-wrap:wrap;row-gap:.6rem}
 #root header>div>.relative.flex-1{order:3;flex:1 1 100%;max-width:none}
 #root header{padding-bottom:.7rem!important}
}

/* 8. Desktop: menu stays in view while a long page scrolls */
@media (min-width:768px){
 #root nav.hidden.md\:block{position:sticky;top:var(--ro-head);align-self:start;max-height:calc(100vh - var(--ro-head));overflow-y:auto;padding-bottom:1.5rem;scrollbar-width:thin}
 #root .md\:grid-cols-\[210px_1fr\]{grid-template-columns:236px minmax(0,1fr)!important}
 #root nav.hidden.md\:block a{font-size:14.5px!important;padding-top:.6rem!important;padding-bottom:.6rem!important}
}

/* 9. Tickets list: status tabs stick under the header; on a phone they are one swipeable row */
html[data-ro-route="tickets"] #root main div.flex.flex-wrap.gap-2.py-4{position:sticky;top:var(--ro-head);z-index:15;background:var(--ro-bg)}
html.dark[data-ro-route="tickets"] #root main div.flex.flex-wrap.gap-2.py-4{background:#0c0a09}
@media (max-width:767px){
 html[data-ro-route="tickets"] #root main div.flex.flex-wrap.gap-2.py-4{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-top:.6rem;padding-bottom:.6rem}
 html[data-ro-route="tickets"] #root main div.flex.flex-wrap.gap-2.py-4::-webkit-scrollbar{display:none}
 html[data-ro-route="tickets"] #root main div.flex.flex-wrap.gap-2.py-4>button{flex:0 0 auto}
}

/* 10. Bigger tap targets on touch screens; 16px inputs so the phone doesn't zoom in */
@media (pointer:coarse){
 #root main button:not([role=checkbox]):not([role=switch]):not([role=radio]){min-height:40px}
 #root input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),#root select,#root textarea{font-size:16px!important}
 #root main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),#root main select{min-height:44px}
 #root nav.fixed>a,#root nav.fixed>button{min-height:52px;justify-content:center}
}
#root nav.fixed .text-\[10px\]{font-size:12px!important;font-weight:600!important}

/* 11. Phone: big money numbers fit inside their cards */
@media (max-width:480px){
 #root main .grid>*{min-width:0}
 #root main .grid :is(.text-2xl,.text-3xl,.text-4xl,.text-5xl){font-size:clamp(1.2rem,6vw,1.75rem)!important;overflow-wrap:anywhere}
 #root main h1.text-4xl,#root main h1.text-3xl{font-size:1.8rem!important;line-height:2.15rem}
}

/* 12. Hebrew/Yiddish typed into English fields shows right-to-left correctly */
#root input,#root textarea{unicode-bidi:plaintext}

/* 13. Phone: the round + button is a bit smaller; on New Ticket it moves to the top so it doesn't cover "Save" */
@media (max-width:767px){
 #root .fixed.bottom-20.right-4>button.w-14{width:3.1rem;height:3.1rem}
 html[data-ro-route="new-ticket"] #root .fixed.bottom-20.right-4{bottom:auto;top:calc(var(--ro-head) + .6rem)}
 #root main{padding-bottom:5.5rem}
}

/* 14. Keyboard focus is visible */
#root :focus-visible{outline:3px solid rgba(181,138,69,.55)!important;outline-offset:2px}