/* ============ ADMIN DASHBOARD ============ The full-screen overlay behind /admin. Built from the same tokens as everything else (see tokens.css), so it follows the light/dark switch without knowing that it exists — there is not a single literal colour below. It is an OVERLAY, not a route. The planner stays built underneath, which is what lets "Back to planner" be instant and lets Escape close it. The consequence is one rule worth naming: while it is up, the body must not scroll (see .admin-open), or reaching the bottom of a long member list starts scrolling the planner behind it and the two surfaces visibly come apart. Deliberately plainer than the planner. This is an administrative screen used occasionally by one person at a desk, not an instrument read in a cockpit — it wants legible rows and unmistakable buttons, not density. */ #adminScreen { position: fixed; inset: 0; z-index: 60; /* Above the planner and its modals, below nothing. */ background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; } #adminScreen[hidden] { display: none; } /* Applied to while the overlay is up. */ .admin-open { overflow: hidden; } /* ---------- HEADER ---------- */ .admin-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; background: linear-gradient(180deg, var(--toolbar1), var(--toolbar2)); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); } .admin-bar h1 { font-size: 16px; letter-spacing: .5px; margin: 0; flex: 1; min-width: 0; } .admin-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ---------- STATUS LINE ---------- Sticky under the header rather than inline in the panel, because it reports the outcome of an action taken anywhere on the page — "invitation sent", "moved to Northern Air" — and a confirmation the admin has to scroll back up to find is one they will not read. */ .admin-msg { display: none; position: sticky; top: 57px; z-index: 1; margin: 0; padding: 10px 20px; font-size: 13px; line-height: 1.5; border-bottom: 1px solid var(--line); } .admin-msg.show { display: block; } .admin-msg.err { background: var(--badbg); color: var(--negtext); border-bottom-color: var(--bad); } .admin-msg.ok { background: var(--goodbg); color: var(--ink); border-bottom-color: var(--good); } .admin-msg.info { background: var(--panel2); color: var(--muted); } /* ---------- LAYOUT ---------- */ .admin-body { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 20px; padding: 20px; align-items: start; max-width: 1200px; margin: 0 auto; } /* One column on a phone or a narrow tablet: the org list stacks above the detail panel rather than being squeezed to an unreadable width beside it. */ @media (max-width: 780px) { .admin-body { grid-template-columns: 1fr; gap: 14px; padding: 14px; } } /* ---------- ORGANIZATION LIST ---------- */ .admin-orgs { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; } .admin-orgs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .admin-orgs-head h2 { font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin: 0; } .admin-org-list { display: flex; flex-direction: column; gap: 4px; } .admin-org { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: transparent; color: var(--ink); border: 1px solid transparent; border-radius: 8px; padding: 9px 11px; cursor: pointer; font: inherit; } .admin-org:hover { background: var(--btnhover); } .admin-org.selected { background: var(--panel2); border-color: var(--accent); } .admin-org-name { font-size: 14px; font-weight: 600; } .admin-org-meta { font-size: 11.5px; color: var(--muted); } /* The catch-all row for accounts in no organization. Dashed, because it is a state to be emptied rather than a place to file people. */ .admin-org-unassigned { border-style: dashed; border-color: var(--line); } /* ---------- DETAIL PANEL ---------- */ .admin-detail { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; min-width: 0; /* Lets the table inside shrink rather than forcing the grid wider. */ } .admin-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .admin-detail-head h2 { font-size: 19px; margin: 0 0 3px; } .admin-detail-sub { font-size: 12px; color: var(--muted); margin: 0; } .admin-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; } .admin-section { padding-top: 18px; } .admin-section + .admin-section { border-top: 1px solid var(--line); margin-top: 18px; } .admin-section h3 { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; } .admin-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 40px 20px; } .admin-empty-small { color: var(--muted); font-size: 13px; padding: 10px 0; } /* ---------- INVITE FORM ---------- */ .admin-invite-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } @media (max-width: 620px) { .admin-invite-fields { grid-template-columns: 1fr; } } .admin-field { display: flex; flex-direction: column; gap: 4px; } .admin-field span { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); } .admin-field input { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 14px; min-width: 0; } .admin-field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } /* ---------- TABLES ---------- TWO THINGS HERE ARE UNDOING SOMETHING ELSE, and both are worth naming or they read as noise and get "tidied" away. FIRST, tables.css:3 sets `th,td { border: 1px solid; text-align: center; white-space: nowrap }` for every table in the app. That is right for the planner — a nav log is a grid of short numbers, and centred numbers in ruled boxes is exactly how a nav log should look. It is wrong for a list of names and email addresses, which are read as text and belong flush left, with rules between rows rather than a box around every cell. Overriding only `border-bottom`, as this file first did, leaves the other three sides in place and every cell drawn as a box. SECOND, the scrolling wrapper is a WRAPPER, not the table. Putting `display: block; overflow-x: auto` on the itself is the well-known one-liner for a scrollable table and it does not work: it takes the element out of table layout, so the browser stops sizing the columns as one shared grid and the header stops lining up with the rows beneath it. The scroll belongs on a div around it, with the table left as a table. */ .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .admin-table th, .admin-table td { border: none; border-bottom: 1px solid var(--line); text-align: left; white-space: normal; vertical-align: middle; padding: 10px 14px 10px 0; } .admin-table th { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-top: 0; padding-bottom: 7px; } .admin-table tbody tr:last-child td { border-bottom: none; } /* Column widths. The three right-hand columns are told to be as narrow as their content (width:1% is never honoured literally — it means "shrink to fit"), and the pilot column is left alone to take what is left over. NOT width:100% on that first column, which is the usual companion to this trick and is wrong here: a percentage on a cell resolves against the whole table, so the first column claims the entire width and the nowrap columns are then added BEYOND it. The table overflows its panel and the last column's buttons sit outside the visible area — which is how the Disable button came to be unreachable. Leaving it auto lets the browser give the slack to the widest column, which is this one. */ .admin-table th:first-child, .admin-table td:first-child { padding-left: 2px; } .admin-table .admin-when, .admin-table .admin-status-col, .admin-table .admin-actions-col { width: 1%; white-space: nowrap; } /* A disabled pilot's row is dimmed but stays fully legible — it is not decoration, it is the row an admin has come to find in order to re-enable it. */ .admin-table tr.is-disabled td { opacity: .62; } /* The email under the name, and the invitee's name under their address. */ .admin-name { font-weight: 600; } .admin-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; word-break: break-all; } /* The controls sit together at the right-hand end, on one line, in a fixed order — move first, then the destructive one. Same order in every row, so the button under the cursor is the button the last row's muscle memory expects. */ .admin-actions-col { text-align: right; padding-right: 2px; } .admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .admin-actions .btn { flex: 0 0 auto; } .btn.small { padding: 4px 9px; font-size: 12px; } .admin-move { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px; font: inherit; font-size: 12px; flex: 0 0 auto; /* BOTH bounds are load-bearing, for opposite reasons. max-width, because this control sits in every row of a table whose useful content is to its left, and an organization with a long name should not be what decides how much room is left for the pilots' addresses. The full name is still there in the open dropdown. min-width, because a