/* Rjeti.com v1.6.9 — unified UI refinements. Loaded AFTER legacy CSS. */
:root {
  --r169-soft:#f3f6fa;
  --r169-hover:#eef2f7;
  --r169-text-secondary:#485569;
  --r169-border:#e6ebf2;
  --r169-outside:#e9edf3;
  --r169-field:#f6f8fb;
  --r169-panel-shadow:0 12px 36px rgba(25,39,66,.09);
}
body[data-theme="dark"] {
  --r169-soft:#253143;
  --r169-hover:#2b384d;
  --r169-text-secondary:#c2cedb;
  --r169-border:#394559;
  --r169-outside:#0c131d;
  --r169-field:#222e3e;
  --r169-panel-shadow:0 15px 43px rgba(0,0,0,.27);
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){
  body[data-theme="system"]{
    --r169-soft:#253143;--r169-hover:#2b384d;
    --r169-text-secondary:#c2cedb;--r169-border:#394559;
    --r169-outside:#0c131d;--r169-field:#222e3e;
    --r169-panel-shadow:0 15px 43px rgba(0,0,0,.27);
    color-scheme:dark;
  }
}
@media(prefers-color-scheme:light){body[data-theme="system"]{color-scheme:light}}
body[data-theme="light"]{color-scheme:light}

/* Keep the app shell aligned, and make narrow columns shrink rather than overflow. */
.app-layout,.main-area,.content-area,.page-main{min-width:0}
.content-area{width:100%}
.content-area.content-wide{grid-template-columns:minmax(0,1fr)}
.content-area.content-wide .right-sidebar{display:none}
.sidebar{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--r169-border) transparent}
.sidebar-profile{min-width:0}
.sidebar-profile>div{min-width:0}
.sidebar-profile strong{white-space:normal;overflow-wrap:anywhere}
.side-nav .nav-link{min-width:0;transition:color .17s,background .17s}
.side-nav .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-link:not(.selected):hover{background:var(--r169-hover)}
.nav-link.selected{background:var(--red-soft);color:var(--red)}
.nav-link .nav-icon{background:var(--r169-soft);border-color:var(--r169-border);color:var(--r169-text-secondary)}
.nav-link.selected .nav-icon{background:var(--red);color:#fff;border-color:var(--red)}
.sidebar-logout button{color:var(--r169-text-secondary)}
.sidebar-logout button:hover{background:var(--red-soft)}

/* Main header — clear focus/active states, correct colors in dark and system mode. */
.topbar,.sidebar{background:var(--surface);border-color:var(--line)}
.top-inner{min-width:0}
.brand{min-width:0;flex-shrink:0}
.top-search{min-width:0;background:var(--r169-field);border-color:var(--r169-border);color:var(--r169-text-secondary)}
.top-search input{min-width:0;width:100%;background:transparent!important;color:var(--ink)!important}
.top-search input::placeholder{color:var(--muted);opacity:1}
.top-search:focus-within{border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 12%,transparent)}
.top-links{flex-shrink:0}
.top-links>a:not(.top-self){color:var(--ink);border-radius:12px}
.top-links>a:not(.top-self):hover{background:var(--r169-hover);color:var(--red)}
.top-links small{color:var(--muted)}
.top-links .bubble{border-color:var(--surface)!important}
.mobile-menu{background:var(--surface);color:var(--ink);border-color:var(--line)}

/* Dark-safe popovers, Messenger, notifications and editor controls. */
.r15-mini-chat,.r15-popover,.r15-inbox,.r15-chat-main,
.r15-chat-compose,.r15-mini-compose,.r15-conversation-list,
.r15-bubble-tools button,.r15-history-button{background:var(--surface);color:var(--ink);border-color:var(--line)}
.r15-mini-chat,.r15-popover{box-shadow:var(--r169-panel-shadow)}
.r15-mini-head{background:var(--red);color:#fff}
.r15-popover-head,.r15-popover-foot,.r15-chat-compose,.r15-mini-compose{border-color:var(--line)}
.r15-popover-notice>span:last-child{color:var(--ink)}
.r15-popover-notice small,.r15-notice-copy small,.r15-conversation small{color:var(--muted)}
.r15-popover-notice:hover,.r15-popover-notice.unread,.r15-conversation:hover,
.r15-notice.unread{background:var(--red-soft);border-color:var(--r169-border)}
.r15-attach,.r15-compose-body,.r15-mini-compose textarea,
.r15-history-button,.r15-chat-scroll,.r15-mini-items{color:var(--ink)}
.r15-attach,.r15-compose-body,.r15-mini-compose textarea{background:var(--r169-field);border-color:var(--r169-border)}
.r15-chat-scroll{background:var(--bg)}
.r15-bubble-row:not(.mine) .r15-bubble{background:var(--surface);border-color:var(--line);color:var(--ink)}
.r15-bubble-row.mine .r15-bubble{background:var(--red);color:#fff;border-color:var(--red)}
.r15-message-meta{color:inherit}
.r15-empty-chat h2{color:var(--ink)}
.r15-empty-chat,.r15-typing{color:var(--muted)}
.r15-notice{background:var(--surface);color:var(--ink);border-color:var(--line)}
.r15-preferences,.r15-pref-line{border-color:var(--line)}
.r15-mini-chat{max-height:calc(100dvh - 50px)}

/* Harmonize old light-only cards / form surfaces in the selected theme. */
.card,.widget,.settings-panel,.admin-panel,.stats-grid>.stat-card{background:var(--surface);color:var(--ink);border-color:var(--line)}
.widget-title h2,.widget-user strong,.widget-group strong{color:var(--ink)}
.widget-user small,.widget-group small{color:var(--muted)}
.widget-user,.widget-group{min-width:0}
.widget-user strong,.widget-group strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.widget-user .avatar{flex:0 0 auto}
.settings-info,.event-topline,.composer-preview,.r165-image-preview,
.r165-upload-status{background:var(--r169-soft);color:var(--ink);border-color:var(--line)}
.stack-form label,.settings-panel label{color:var(--ink)}
.stack-form input,.stack-form textarea,.stack-form select,
.r167-dialog select,.r167-dialog textarea{border-color:var(--r169-border);color:var(--ink)}
.stack-form input:focus-visible,.stack-form textarea:focus-visible,.stack-form select:focus-visible{
  border-color:var(--red);outline:2px solid color-mix(in srgb,var(--red) 28%,transparent);outline-offset:1px
}
.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-outline:hover{background:var(--r169-hover)}
.r167-prompt{background:var(--r169-field);color:var(--r169-text-secondary);border-color:var(--r169-border)}
.r167-prompt:hover,.r167-prompt:focus-visible{background:var(--r169-hover);color:var(--ink);border-color:var(--red)}
.r167-dialog{box-shadow:var(--r169-panel-shadow)}
.r167-dialog-header,.r167-form-body .composer-tools,.r167-dialog .composer-bottom{border-color:var(--line)}
.r167-form-body textarea[data-composer-body]::placeholder{color:var(--muted);opacity:1}
.r167-form-body .composer-tools>button,.r167-form-body .composer-tools>.file-label{color:var(--ink)}
.r167-form-body .composer-tools>button:hover,.r167-form-body .composer-tools>.file-label:hover{background:var(--red-soft)!important}
.r167-dialog .v13-publish-mode{background:var(--r169-field);border-color:var(--r169-border);color:var(--ink)}
.r167-dialog .r167-submit:disabled{opacity:.62;cursor:wait;box-shadow:none}
.r167-dialog .r165-image-preview img{max-width:100%}
.r167-dialog .composer-help{line-height:1.5}

/* Desktop boxed: a comfortable center column and evenly aligned right rail. */
@media(min-width:1121px){
  body[data-layout="boxed"]{background:var(--r169-outside)}
  body[data-layout="boxed"] .topbar{max-width:1360px}
  body[data-layout="boxed"] .app-layout{max-width:1360px}
  body[data-layout="boxed"] .content-area{gap:16px}
  body[data-layout="boxed"] .content-area.content-wide{grid-template-columns:minmax(0,1fr)}
  body[data-layout="boxed"] .right-sidebar .widget{padding:16px}
  body[data-layout="boxed"] .r15-popovers{right:max(16px,calc((100vw - 1360px)/2 + 38px))}
}
@media(min-width:1121px) and (max-width:1290px){
  body[data-layout="boxed"] .app-layout{grid-template-columns:198px minmax(0,1fr)}
  body[data-layout="boxed"] .content-area:not(.content-wide){grid-template-columns:minmax(0,1fr) 222px;gap:12px;padding:18px 14px 48px}
  body[data-layout="boxed"] .brand{min-width:185px;font-size:23px}
  body[data-layout="boxed"] .top-inner{gap:10px}
}
@media(min-width:1121px) and (max-width:1180px){
  body[data-layout="boxed"] .content-area:not(.content-wide){grid-template-columns:minmax(0,1fr)}
  body[data-layout="boxed"] .right-sidebar{display:none}
}
@media(max-width:1120px){
  body[data-layout="boxed"] .content-area{max-width:850px}
}

/* Tablet/mobile: chat never covers navigation; header remains usable. */
@media(max-width:790px){
  .topbar{top:0;z-index:78}
  .top-inner{gap:8px;padding-inline:12px}
  .top-search{flex:1 1 auto}
  .top-links{gap:3px}
  .top-links>a:not(.top-self){min-width:42px;min-height:44px;padding:8px 5px}
  .top-links .bubble{top:-2px;right:-2px}
  .sidebar{background:var(--surface);top:64px;height:calc(100dvh - 64px);padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .content-area{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .r15-popovers{top:67px;right:max(9px,env(safe-area-inset-right))}
  .r15-popover{max-height:calc(100dvh - 145px)}
  .r15-popover-scroll{max-height:min(48dvh,360px)}
}
@media(max-width:760px){
  .r16-mobile-nav{z-index:95;min-height:68px;bottom:0;left:0;right:0}
  .r16-mobile-nav a{min-height:48px;min-width:44px;justify-content:center}
  .r15-mini-chat{
    z-index:101;
    position:fixed;
    bottom:calc(78px + env(safe-area-inset-bottom))!important;
    right:10px;
    height:min(460px,calc(100dvh - 165px));
    max-height:calc(100dvh - 165px);
    max-width:calc(100vw - 20px)
  }
  .r15-popovers{z-index:105}
  .r15-messenger{height:calc(100dvh - 158px);min-height:0}
  .r15-chat-compose{position:relative}
  .r167-dialog-header{position:relative}
  .r167-dialog .composer-bottom{padding-bottom:calc(14px + env(safe-area-inset-bottom))!important}
}
@media(max-width:490px){
  .brand{font-size:20px;letter-spacing:-.9px}
  .brand-mark{width:35px;height:35px}
  .top-inner{gap:6px;padding-inline:9px}
  .top-search{padding:8px;min-width:38px}
  .top-search input{font-size:12px}
  .top-links>a:not(.top-self){min-width:39px}
  .r15-mini-chat{width:calc(100vw - 20px);right:10px;max-height:calc(100dvh - 158px)}
  .r167-dialog-header{padding:14px 15px}
  .r167-form-body{padding:14px 15px}
  .r167-dialog .composer-bottom{gap:7px;flex-wrap:wrap}
  .r167-dialog .composer-submit{min-width:0}
  .r167-quick-actions{gap:3px}
  .r167-quick-actions>button{min-width:0;white-space:nowrap}
}
@media(max-width:365px){
  .top-search{flex:0 1 42px}
  .top-search input{width:0;opacity:0;pointer-events:none}
  .top-search:focus-within{flex:1 1 125px}
  .top-search:focus-within input{width:100%;opacity:1;pointer-events:auto}
  .r16-mobile-nav a{min-width:38px}
}
/* Keyboard and reduced-motion quality. */
:where(.r15-popover,.r15-mini-chat,.r167-dialog,.sidebar,.r16-mobile-nav) a:focus-visible,
:where(.r15-popover,.r15-mini-chat,.r167-dialog,.sidebar,.r16-mobile-nav) button:focus-visible,
.r168-layout-option:focus-within{outline:3px solid var(--red);outline-offset:2px}
button:disabled{cursor:not-allowed}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media(max-width:365px){
  .brand>span:last-child{display:none}
  .brand{min-width:35px;flex:0 0 35px}
}

/* Rjeti.com 1.8 — opt-in push and legal text, consistent with both themes */
.r18-push-box{margin-top:16px;padding:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.r18-push-box h2,.r18-push-box p{width:100%;margin:0}
.r18-push-box p{color:var(--muted,#667085);line-height:1.5}
.r18-legal-footer{display:flex;justify-content:center;gap:18px;padding:24px 12px 100px;color:var(--muted,#667085);font-size:12px}
.r18-legal-footer a{color:inherit;text-decoration:none}
.r18-legal-footer a:hover{text-decoration:underline}
.r18-legal{padding:24px;line-height:1.65}.r18-legal h2{margin:16px 0 6px}.r18-legal p{margin:0 0 12px}
