/* ---------- Theming ---------- */ :root { --accent: #3669cc; --border: #d0d0d0; --bg-panel: #ffffff; --bg-toolbar: #ffffff; --radius: 6px; --shadow: 0 2px 4px rgba(0,0,0,.05); --font-code: "Fira Mono", monospace; --accent-soft: rgba(178, 129, 207, 0.25); } html,body { height:100%; margin:0; font-family:system-ui, Roboto, sans-serif; font-size: 12pt; color:#222; } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /* 1️⃣ Make a vertical flex-container */ body { display: flex; flex-direction: column; } button,select,input,textarea {font:inherit} textarea {resize:both} /* ---------- Toolbar ---------- */ .toolbar { display:flex;align-items:center;gap:.4rem; padding:.4rem .8rem;background:var(--bg-toolbar);; position:sticky;top:0;z-index:10; } .toolbar .br { border-left: 1px black solid; padding-left: 10px; } .ti{background:none;border:0;padding:0;cursor:pointer} .ti img{width:36px;height:36px;display:block} .ti--right{margin-left:auto} .tt{font-weight:500;margin-left:.8rem} input[type="text"], .input--short, .input--long { font: inherit; border: 1px solid var(--border, #d0d0d0); border-radius: var(--radius, 6px); background: #f4f7fa; color: inherit; padding: .45rem .7rem; outline: none; line-height: 1.3; transition: border-color .13s; font-size: 1em; box-sizing: border-box; } input[type="text"]:hover, input[type="text"]:focus, .input--short:focus, .input--long:focus { border-color: var(--accent, #3669cc); background: #fff; } .input--short { width: 10rem; max-width: 100%; box-sizing: border-box;} .input--long { width: 20rem; max-width: 100%; box-sizing: border-box;} .dash-panel { background: var(--bg-toolbar); border: 1.5px solid var(--border); border-radius: 1.8rem; /* more rounded corners! */ box-shadow: 0 4px 24px rgba(60,64,67,.09); padding: 0.5rem; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; /* For cards to never overflow on resize: */ overflow: auto; } /* Panel itself shouldn't scroll; inner bodies will */ .dash-panel { overflow: hidden; /* ← was auto */ min-height: 0; height: 100%; } .dash-panel.maximized { position: fixed !important; top: 100px; /* adjust to match your header */ left: 0; width: 100vw; height: calc(100vh - 100px); z-index: 2000; background: #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,0.12); overflow: auto; } body.maximized-panel-active main .dash-panel:not(.maximized) { visibility: hidden; pointer-events: none; } /* Any card in a dash-panel can grow when it has content */ .dash-panel > .lc-section:has(.lc-body:not(:empty)) { flex: 1 1 0; min-height: 0; /* critical for nested overflow */ } /* When a section grows, its body becomes the scroll container */ .dash-panel > .lc-section:has(.lc-body:not(:empty)) .lc-body { flex: 1 1 0; min-height: 0; overflow: auto; /* ← actual scrolling happens here */ } /* Optional: better headings and spacing */ .dash-panel h2, .dash-panel h3 { margin-top: .7em; margin-bottom: .7em; font-weight: 600; letter-spacing: 0.01em; } /* Optional: for list/table items inside */ .dash-panel table, .dash-panel .list { border-radius: 1rem; overflow: hidden; background: var(--bg-panel); } .dash-panel .button{ align-self: flex-start; /* left-align and no stretch */ width: auto; /* restore intrinsic width */ max-width: fit-content; /* modern browsers; harmless fallback */ } .icon-button { background: none; border: none; box-shadow: none; padding: 2px; margin: 6px 0 12px 4px; border-radius: 50%; cursor: pointer; transition: background .14s; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .icon-button:hover { background: #e5ebf5; } .icon-button:active { background: #dbe3ee; } .container{ display:flex; flex-direction:column; gap:.6rem; min-height:0; /* allow inner panels to shrink/scroll */ } /* ---------- Forms & grids ---------- */ fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem} .checkbox-grid label{display:flex;gap:.3rem;white-space:nowrap} .button{ padding:.4rem .8rem; margin-top: 0.3rem; border:1px solid var(--border); background:#fff; border-radius:var(--radius);cursor:pointer } .button--primary{background:var(--accent);color:#fff;border-color:var(--accent)} a { color: var(--accent); text-decoration: none; } a:hover, a:focus { text-decoration: underline; } label { font-size: 10pt; } .box { flex: 1 1 auto; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0 */ min-height: 200px; /* Ensures at least some content is visible */ overflow: auto; /* Allows scrolling if content overflows */ padding: 10px; flex-basis: auto; } /* GodView overlay that sits on top of the info column */ #godView{ position: absolute; /* remove from normal flow */ inset: 0; /* stretch to the panel’s edges */ z-index: 20; /* above filters/info but below global modals */ display: flex; /* center the .chat card */ align-items: center; justify-content: center; background: var(--bg-panel); /* same colour as panel */ overflow: auto; /* scroll *inside* the overlay if chat grows */ } /* 1️⃣ let every management table use the full column width */ .list{ width:100%; table-layout:auto; /* cells obey explicit / remaining width */ } /* 2️⃣ first cell in each row gets the remaining space */ .list td:first-child{ width:100%; } /* 3️⃣ inputs inside those cells grow/shrink with the table */ .list input[type="text"]{ width:100%; box-sizing:border-box; /* include padding in the 100 % */ } table.list tr > td:last-child{ padding-right: .75rem !important; /* ← adjust to taste */ } th { text-align: left; } .header-row { display: flex; align-items: center; /* Vertically aligns images and h3 */ gap: 10px; /* Optional: space between heading and images */ } .image-row img { height: 24px; /* Adjust as needed */ display: inline-block; } /* ========================================================================= Themed dropdown – add class="dropdown" to