/* ComponentERP beta (T2710): sign-in screen + beta marker. Uses the mock's own colour variables where they exist. */
body.ce-signed-out > aside, body.ce-signed-out > main { visibility: hidden; }
#ce-login { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: linear-gradient(160deg, #17334e, #0f2236); padding: 16px; }
.ce-login-card { width: min(380px, 100%); background: #fff; color: #17283a; border-radius: 12px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.4); display: grid; gap: 12px; font: 15px/1.5 "Segoe UI", system-ui, sans-serif; }
.ce-brand { font-size: 26px; letter-spacing: -.3px; } .ce-brand b { color: #1085d8; } .ce-brand span { font-size: 12px; font-weight: 700; color: #fff; background: #e0a020; border-radius: 4px; padding: 2px 6px; vertical-align: 4px; margin-left: 4px; }
.ce-login-card label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.ce-login-card input { padding: 10px 12px; border: 1px solid #c4d3e1; border-radius: 7px; font: inherit; }
.ce-login-card button { padding: 12px; border: 0; border-radius: 8px; background: #1085d8; color: #fff; font: 700 16px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.ce-err { color: #b42318; margin: 0; } .ce-fine { font-size: 12px; margin: 0; }
.ce-signout { font-size: 12px; margin-left: 8px; }

/* Collapsible menu groups (nav-collapse.js) */
.sidebar .ce-navtoggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; border-radius: 0; background: transparent; text-align: left; cursor: pointer; min-height: 0; }
.sidebar .ce-navtoggle:hover { color: #fff; }
.sidebar .ce-chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 2px 3px 8px; transition: transform .15s; opacity: .8; }
.sidebar .ce-navtoggle[aria-expanded="false"] .ce-chev { transform: rotate(-45deg); margin-bottom: 0; }
.sidebar .ce-navlogo { display: block; width: 100%; border: 0; border-radius: 0; background: transparent; padding: 16px 14px 14px; min-height: 0; cursor: pointer; border-left: 3px solid transparent; }
.sidebar .ce-navlogo img { display: block; width: 100%; height: auto; }
.sidebar .ce-navlogo:hover, .sidebar .ce-navlogo.active { background: #284866; }
.sidebar .ce-navlogo.active { border-left-color: #4cb3ff; }

/* New pages (ce-pages.js): compact in-table buttons */
.searchtable button.tiny { min-height: 0; padding: 3px 9px; font-size: 11px; }
.searchtable td { vertical-align: middle; }
.grid .span3, .grid .span4, .grid .span6 { grid-column: 1 / -1; }

/* User menu + notifications bell (user-menu.js) */
.header-tools { position: relative; }
.ce-usermenu { position: relative; }
.ce-usermenu #ce-me { display: inline-flex; align-items: center; gap: 2px; min-height: 0; padding: 4px 6px; font-weight: 500; }
.ce-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px #0003; }
#ce-me-menu { min-width: 160px; padding: 6px 0; }
#ce-me-menu button { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; background: transparent; font-weight: 400; min-height: 0; padding: 8px 14px; }
#ce-me-menu button:hover { background: var(--group); }
.ce-notes { width: min(700px, calc(100vw - 32px)); }
.ce-note { padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ce-note.unread { background: light-dark(#fffde7, #3a3416); }
.ce-badge { position: absolute; top: -2px; right: -4px; background: #d93025; color: #fff; border-radius: 9px; font-size: 10px; font-weight: 700; padding: 1px 5px; line-height: 14px; }
/* Lists inside settings panels: size to their content, never wider than the panel */
.record-section .tablewrap { min-height: 0; }
.record-section table.searchtable { min-width: 0; }
.record-section .searchtable td:last-child { white-space: nowrap; }
#ce-unsaved { position: fixed; left: 200px; right: 20px; bottom: 16px; z-index: 40; background: light-dark(#fff4e5, #3d2a10); color: light-dark(#7a4100, #ffd9a8); border: 1px solid light-dark(#f5b971, #8a5a1c); border-radius: 8px; padding: 10px 40px 10px 14px; font-size: 13px; box-shadow: 0 6px 20px #0002; }
#ce-unsaved button { position: absolute; right: 8px; top: 6px; min-height: 0; padding: 2px 6px; color: inherit; }
@media (max-width: 760px) { #ce-unsaved { left: 12px; right: 12px; } }