/* FilmFusion on LightStruc 6: the classic look (gray title bars, compact type), in plain CSS. */
html, body { margin: 0; padding: 0; background: #d8d8d8; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #222; }
ls-panel { display: block; }

.app-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-height: 34px; padding: 3px 14px; box-sizing: border-box;
    background: linear-gradient(180deg, #4a4a4a 0%, #1e1e1e 100%); color: white; }
.app-bar .brand { font-size: 12pt; font-weight: bold; letter-spacing: .5px; }
.app-bar .brand small { font-weight: normal; color: #9bd; font-size: 9pt; margin-left: 8px; }
.app-bar button { margin-left: 8px; }

button, input[type=button] { font: inherit; padding: 3px 10px; border: 1px solid #888; border-radius: 6px; background: #f4f4f4; cursor: pointer; }
button:hover:not(:disabled) { background: white; border-color: #333; }
button:disabled { color: #999; cursor: default; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], select, textarea {
    font: inherit; padding: 2px 4px; border: 1px solid #aaa; border-radius: 3px; box-sizing: border-box; background: white; }
input:disabled, select:disabled, textarea:disabled, input[readonly] { background: #eee; color: #555; }

/* Responsive (D-24): the module fills the portal's work area beside the menu, edge to edge; one column on a phone.
   Field widths are classes (w-xs … w-wide), never inline styles, so the phone rules can change them. */
.module { background: white; }
.module-title { padding: 6px 15px; background: #555; color: white; font-size: 10pt; font-weight: bold; }
.hdr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 28px; padding: 3px 10px; box-sizing: border-box; background: lightgray; font-weight: bold; }
.hdr .title { flex: 1 1 200px; min-width: 0; color: blue; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr .menu { margin-left: auto; display: flex; gap: 6px; }
.strip { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 3px 10px; font-size: 8pt; font-weight: bold; background: #eee; }
.strip > span { white-space: nowrap; }
.strip span span { color: blue; }
.strip .mode { margin-left: auto; color: #c00; }

/* no rule under the tabs: the active tab, the body's own color, runs straight into the body */
.tabbar { display: flex; gap: 3px; padding: 6px 10px 0; overflow-x: auto; }
.tabbar button { flex: 0 0 auto; border-radius: 7px 5px 0 0; border-bottom: none; background: #777; color: white; min-width: 90px; }
.tabbar button.active { background: #ccc; color: black; }
.tabbar button:disabled { background: #999; color: #bbb; }
.tab { padding: 10px; min-height: 470px; background: #ccc; }

.box { background: #efefef; border: 1px solid #ccc; margin-bottom: 10px; }
.box > .box-title { height: 21px; line-height: 21px; padding-left: 6px; font-weight: bold; background: linear-gradient(180deg, #fafafa, #ddd); border-bottom: 1px solid #ccc; }
.box > .box-body { padding: 8px 10px; }
.cols { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.col { flex: 1 1 340px; min-width: 0; }
.f { display: inline-block; margin: 0 6px 6px 0; vertical-align: top; max-width: 100%; }
.f > b { display: block; margin-bottom: 1px; }
.f.wide { display: block; margin-right: 0; }
.f.wide input, .f.wide select { width: 100%; }
.with-btn { display: flex; gap: 6px; align-items: center; }
.with-btn input { flex: 1; min-width: 0; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 2px 6px; padding: 6px 8px; background: white; border: 1px solid gray; border-radius: 10px; }
.checks.three { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.checks label { white-space: nowrap; }
.inset { display: inline-block; max-width: 100%; box-sizing: border-box; border: 1px solid gray; border-radius: 7px; padding: 4px 6px; margin-bottom: 6px; }
.msg { min-height: 1.2em; color: #a00; }
.msg.ok { color: #176b17; }
.summary { display: flex; flex-wrap: wrap; gap: 10px 40px; }
.counts { background: white; border: 1px solid gray; border-radius: 10px; padding: 5px; }
.counts td { padding: 1px 6px; }
.counts td:first-child { text-align: right; font-weight: bold; }
.later { color: #777; font-style: italic; }
/* the filters under a grid: a framed bar, rounded like the grid, the filters spread across it */
.filters { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 8px 16px; margin-top: 8px; padding: 6px 12px 8px;
    background: #efefef; border: 1px solid #999; border-radius: 10px; }
.movies-grid { height: 380px; }
/* a grid with the fill attribute takes the height its tab has left (never under 240px), and
   pages its rows to fit; the filters under it keep their own height */
.tab:has(> data-grid[fill]) { display: flex; flex-direction: column; }
.tab > data-grid[fill] { flex: 1 1 0; height: auto; min-height: 240px; }
.note-box { width: 100%; height: 100px; }

.right { float: right; font-weight: normal; }
.warn { color: #c00; }
.pre { white-space: pre-wrap; }
.scroll-x { overflow-x: auto; }
button.strong { font-weight: bold; }
.action-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.action-row button { flex: 0 0 auto; }
.submit-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.submit-row .grow { flex: 1 1 260px; margin: 0; }
.totals > div { margin: 2px 0; white-space: nowrap; }
.side-grid { height: 330px; }

/* score and rating tables: a radio per point, the classic blue heading */
table.scale { width: 100%; border-collapse: collapse; background: white; }
table.scale th { background: #0169b0; color: white; border: 1px solid black; padding: 2px 4px; text-align: center; font-weight: bold; }
table.scale td { border: 1px solid black; text-align: center; padding: 2px 4px; }
table.scale td.label { text-align: left; white-space: nowrap; }
table.scale label { display: block; cursor: pointer; }
table.scale label span { display: block; font-size: 8pt; color: #555; }
table.scale.detail td { min-width: 34px; }
table.progress th { padding: 1px 6px; font-weight: bold; }
table.progress td { text-align: center; }
table.progress td:first-child { text-align: right; }
.checks.tally { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.checks.three.tally { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.tally label { white-space: nowrap; }
.tally-n { display: inline-block; min-width: 18px; text-align: center; font-weight: bold; color: blue; }

/* The portal shell: app bar, vertical menu (private/menu.json) beside the work area, footer.
   Below 900px the menu folds away behind the menu button and opens over the work area. */
body { display: flex; flex-direction: column; min-height: 100vh; }
#root_pnl, #master_pnl { display: flex; flex-direction: column; flex: 1 0 auto; }
.app-bar .brand img { display: block; height: 28px; width: auto; }
.app-bar .who { margin-left: auto; white-space: nowrap; }
.menu-toggle { margin: 0 4px 0 0; padding: 2px 9px; font-size: 14pt; line-height: 1; background: transparent; color: white; border-color: #777; }
.menu-toggle:hover:not(:disabled) { background: #333; color: white; }
.shell { position: relative; display: flex; align-items: flex-start; flex: 1 0 auto; }
.side-menu { flex: 0 0 190px; align-self: stretch; padding: 8px 0; background: #2d2d2d; color: #ddd; font-size: 9.5pt; }
.side-menu details { margin-bottom: 2px; }
.side-menu summary { padding: 6px 12px; font-weight: bold; color: #fff; cursor: pointer; list-style-position: inside; }
.side-menu summary:hover { background: #3a3a3a; }
.side-menu button { display: block; width: 100%; padding: 5px 12px 5px 28px; text-align: left; border: none; border-radius: 0; background: transparent; color: #ddd; }
.side-menu > button { padding-left: 12px; font-weight: bold; color: #fff; }
.side-menu button:hover:not(:disabled) { background: #444; color: white; }
.side-menu button.active { background: #0169b0; color: white; }
.side-menu button:disabled { color: #8a8a8a; }
.side-menu button small { font-size: 7pt; color: #777; text-transform: uppercase; margin-left: 4px; }
.work { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
/* the open module, and its tab area, fill the work area's height (a hidden panel stays hidden: its inline display wins) */
.work > #content, .work > #content > ls-panel, .module, .module > ls-panel[ls-manager] { flex: 1 0 auto; display: flex; flex-direction: column; }
.module > ls-panel[ls-manager] > ls-panel { flex: 1 0 auto; }
.empty { max-width: 400px; margin: 60px auto; text-align: center; color: #555; }
.app-footer { padding: 7px 10px; text-align: center; font-size: 8.5pt; font-weight: bold; color: #ddd; background: #1e1e1e; }
.signin .back { margin: 12px 0 0; }
/* Systems > Users */
.hint { margin: 8px 0; line-height: 1.4; }
.checks.roles { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.checks.roles label { white-space: nowrap; }
@media (min-width: 901px) { .menu-toggle { display: none; } }
@media (max-width: 900px) {
    .side-menu { position: absolute; z-index: 5; top: 0; left: 0; bottom: 0; width: 230px; display: none; box-shadow: 4px 0 10px rgba(0,0,0,.35); }
    .side-menu.shown { display: block; }
    .side-menu button, .side-menu summary { padding-top: 9px; padding-bottom: 9px; }
}

.w-xs { width: 52px; }  .w-s { width: 75px; }   .w-m { width: 120px; }
.w-l { width: 160px; }  .w-xl { width: 200px; } .w-xxl { width: 255px; } .w-wide { width: 320px; }
.num { text-align: center; }
input, select, textarea { max-width: 100%; }

.signin { max-width: 320px; margin: 80px auto; padding: 16px 20px; background: white; border: 1px solid #999; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.signin h3 { margin: 0 0 10px; }
.signin input { width: 100%; margin-bottom: 8px; }

/* A phone or a narrow window: the module fills the screen, wide fields take the full line,
   and the type and touch targets grow (16px inputs also stop phones zooming on focus). */
@media (max-width: 600px) {
    body { font-size: 10.5pt; }
    .tab { min-height: 0; padding: 8px; }
    .tabbar button { min-width: 0; padding: 6px 12px; }
    .hdr .menu button { padding: 6px 12px; }
    .inset { display: block; }
    .movies-grid { height: 60vh; }
    .filters .f { flex: 1 1 140px; }
    .filters .f select, .filters .f input { width: 100%; }
    input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], select, textarea { font-size: 16px; }
    .signin { margin: 24px 16px; }
    table.scale td.label { white-space: normal; }
    table.scale th, table.scale td { padding: 2px; }
}