near the top of ; the .auth-shell content floats on top. */ body.auth-video { background: #0b1020; overflow: hidden; } .auth-bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: #0b1020; pointer-events: none; transform-origin: 50% 50%; /* Hold still for ~1s, then drift in a touch (clipped by body.auth-video's overflow:hidden). */ animation: auth-bg-zoom 22s ease-out 1s 1 forwards; } @keyframes auth-bg-zoom { from { transform: scale(1); } to { transform: scale(1.1); } } @media (prefers-reduced-motion: reduce) { .auth-bg-video { animation: none; } } .auth-bg-scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(130% 130% at 50% 38%, rgba(2, 6, 16, 0.30), rgba(2, 6, 16, 0.82)); } body.auth-video .auth-shell { position: relative; z-index: 2; } /* System-message banners shown below the card (landing/login) — same width as .auth-card and the same look as the in-app #system-messages alerts. */ .auth-messages { width: min(28rem, 100%); display: flex; flex-direction: column; gap: 0.5rem; } .auth-messages .system-message { position: relative; margin-bottom: 0; padding-right: 2.2rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .system-message-title { font-weight: 700; margin-bottom: 0.2rem; } .system-message-body { word-break: break-word; } .system-message-close { position: absolute; top: 0.1rem; right: 0.4rem; border: 0; background: transparent; color: inherit; font-size: 1.35rem; line-height: 1; padding: 0 0.25rem; cursor: pointer; opacity: 0.6; } .system-message-close:hover { opacity: 1; } .alert-warning { background: #fff3cd; color: #664d03; } .auth-card { width: min(28rem, 100%); background: var(--auth-card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--auth-border); border-radius: 0.5rem; padding: 1.5rem 1.5rem 1.25rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); } .auth-card h1 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--auth-muted); margin: 0 0 1rem; } .auth-logo { display: inline-flex; flex-direction: row; align-items: stretch; gap: 0.6rem; padding: 0.35rem 0; margin-bottom: 1rem; line-height: 1; color: var(--auth-accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; } .auth-logo .logo-name { font-size: 1.35rem; letter-spacing: 0.04em; } .auth-logo .logo-sub { font-size: 0.95rem; letter-spacing: 0.18em; font-weight: 500; text-transform: lowercase; opacity: 0.9; } .auth-logo .logo-divider { align-self: stretch; width: 1px; background: currentColor; opacity: 0.45; } .auth-logo .logo-phi { font-family: "Courier New", Courier, monospace; font-size: 2.5rem; font-weight: 200; display: inline-flex; align-items: flex-start; } /* Site logo, standing where the phi does (app_site_logo_html in auth.php). styles.css sizes .company-logo inside the SPA, but nothing did on the auth pages — the phi is the only thing that had ever occupied this slot there. An unsized 800x200 mark therefore rendered at natural size and dwarfed the page. Height is matched to the wordmark rather than to the phi's 2.5rem font, and the 4:1 crop preset lands at 9.6rem wide inside the 10rem cap. */ /* Dark band behind the wordmark at the top of an auth card. A company logo is normally light artwork on transparency — designed for the app's dark chrome — so on the pale card it was either invisible or ringed by a white box. This gives it the background it was drawn for, and matches the chrome a user sees the moment they are through the door. Scoped to .auth-card so the admin bar, which uses .auth-logo inline in a light header row, is untouched. The negative margins mirror .auth-card's 1.5rem padding so the band bleeds to the card edges. */ .auth-card .auth-logo { display: flex; justify-content: center; align-items: center; background: #10151b; color: #3dd68c; /* the wordmark green used on the SPA's dark chrome */ margin: -1.5rem -1.5rem 1.25rem; padding: 0.85rem 1.5rem; border-radius: 0.5rem 0.5rem 0 0; } /* The divider is currentColor, so it follows the green above; hold it back so it reads as a separator rather than a third element. */ .auth-card .auth-logo .logo-divider { opacity: 0.35; } .auth-logo .company-logo { height: 2.4rem; width: auto; max-width: 10rem; object-fit: contain; align-self: center; } .form-row { margin-bottom: 0.85rem; } .form-row label { display: block; font-size: 0.78rem; color: var(--auth-muted); margin-bottom: 0.25rem; } .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="password"], .form-row select { width: 100%; box-sizing: border-box; padding: 0.45rem 0.6rem; background: var(--auth-input-bg); color: var(--auth-text); border: 1px solid var(--auth-input-border); border-radius: 0.3rem; font-size: 0.9rem; } .form-row input:focus, .form-row select:focus { outline: none; border-color: var(--auth-accent); box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.18); } .btn-primary { display: inline-block; background: var(--auth-accent); color: #ffffff; border: 0; border-radius: 0.3rem; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; text-transform: uppercase; } .btn-primary:hover { filter: brightness(1.07); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-secondary { background: transparent; color: var(--auth-text); border: 1px solid var(--auth-border); border-radius: 0.3rem; padding: 0.4rem 0.7rem; font-size: 0.8rem; cursor: pointer; } .btn-secondary:hover { border-color: var(--auth-accent); color: var(--auth-accent); } .btn-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; } .alert { padding: 0.55rem 0.8rem; border-radius: 0.3rem; margin-bottom: 0.75rem; font-size: 0.85rem; } .alert-error { background: var(--auth-error-bg); color: var(--auth-error-fg); } .alert-success { background: var(--auth-success-bg); color: var(--auth-success-fg); } .alert-info { background: var(--auth-info-bg); color: var(--auth-info-fg); } .muted { color: var(--auth-muted); } .small { font-size: 0.8rem; } .auth-guest { margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--auth-border); display: flex; flex-direction: column; gap: 0.45rem; align-items: center; text-align: center; } .auth-guest-prompt { display: block; } .auth-guest-btn { /* Mirror .btn-primary's footprint (padding, weight, type) but keep the .btn-secondary (outlined) treatment so it visually ranks below the Sign-in primary action. */ display: inline-block; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; } /* Quote block on the login page (and any other auth page that wants one). Sits below the auth-card on the gradient background; width matches the card so the layout stays aligned. */ .auth-quote { width: min(28rem, 100%); margin: 0; } .auth-quote .quote-text { margin: 0; font-size: 0.92rem; font-style: italic; color: var(--auth-muted); line-height: 1.55; } .auth-quote .quote-attrib { margin: 0.6rem 0 0; text-align: right; font-size: 0.82rem; color: var(--auth-muted); letter-spacing: 0.04em; } .text-right { text-align: right; } .mt-2 { margin-top: 0.75rem; } /* Admin table styling. */ .admin-shell { padding: 1.5rem; max-width: 80rem; margin: 0 auto; } .admin-shell h1 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 1rem; } .admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .admin-table { width: 100%; border-collapse: collapse; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--auth-border); border-radius: 0.4rem; overflow: hidden; font-size: 0.85rem; } .admin-table thead th { text-align: left; padding: 0.5rem 0.65rem; background: rgba(0, 0, 0, 0.04); border-bottom: 1px solid var(--auth-border); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; color: var(--auth-muted); } .admin-table tbody td { padding: 0.45rem 0.65rem; border-bottom: 1px solid rgba(0, 0, 0, 0.04); vertical-align: middle; } .admin-table tbody tr:hover { background: rgba(0, 0, 0, 0.03); } .admin-table input[type="text"], .admin-table input[type="email"], .admin-table select { background: var(--auth-input-bg); color: var(--auth-text); border: 1px solid var(--auth-input-border); border-radius: 0.25rem; padding: 0.2rem 0.35rem; font-size: 0.8rem; } .admin-table .actions { display: flex; gap: 0.35rem; flex-wrap: wrap; } .admin-table .actions button { font-size: 0.7rem; padding: 0.25rem 0.5rem; background: transparent; border: 1px solid var(--auth-border); color: var(--auth-text); border-radius: 0.25rem; cursor: pointer; } .admin-table .actions button:hover { border-color: var(--auth-accent); color: var(--auth-accent); } .admin-table .actions button.danger:hover { border-color: #b02a37; color: #b02a37; } /* Streams folder picker inside each user row. Vertical list of checkbox rows in a small bounded box so multiple users on one page don't push the table off the screen. */ .admin-streams { display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem; max-height: 8rem; overflow-y: auto; padding: 0.25rem 0.4rem; border: 1px solid var(--auth-input-border); border-radius: 0.25rem; background: var(--auth-input-bg); } .admin-streams-row { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.8rem; padding: 0.1rem 0; user-select: none; } .admin-streams-row input[type="checkbox"] { margin: 0; cursor: pointer; } .admin-streams-row:hover { color: var(--auth-accent); } .admin-add { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 0.5rem; padding: 0.75rem; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--auth-border); border-radius: 0.4rem; margin-bottom: 1rem; } .admin-add input, .admin-add select { background: var(--auth-input-bg); color: var(--auth-text); border: 1px solid var(--auth-input-border); border-radius: 0.25rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; } .badge { display: inline-block; font-size: 0.65rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 0.25rem; background: rgba(0, 0, 0, 0.08); color: var(--auth-muted); } .badge-super { background: rgba(25, 135, 84, 0.18); color: var(--auth-accent); } .badge-lead { background: rgba(13, 110, 253, 0.18); color: #0a58ca; } .badge-disabled { background: rgba(220, 53, 69, 0.15); color: #842029; } .badge-first { background: rgba(255, 193, 7, 0.20); color: #997404; } .badge-enterprise { background: rgba(111, 66, 193, 0.18); color: #59389b; } .company-logo-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin: 0.5rem 0 1rem; } .company-logo-preview { width: 7rem; height: 7rem; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--auth-border); border-radius: 0.5rem; background: rgba(0, 0, 0, 0.02); padding: 0.4rem; flex: 0 0 auto; } .company-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Account page additions. */ .account-section { margin-top: 1.5rem; margin-bottom: 0.6rem; font-size: 1rem; font-weight: 600; } .account-dl { display: grid; grid-template-columns: max-content 1fr; column-gap: 1rem; row-gap: 0.25rem; margin: 0 0 1rem; font-size: 0.85rem; } .account-dl dt { color: var(--auth-muted); font-weight: 500; } .account-dl dd { margin: 0; color: var(--auth-text); } .account-form { margin: 0.5rem 0 1.2rem; } .account-form label { display: block; margin-bottom: 0.25rem; } .account-form .d-row { display: flex; gap: 0.5rem; align-items: center; } .account-form input[type="text"], .account-form input[type="number"] { flex: 1 1 auto; background: var(--auth-input-bg); border: 1px solid var(--auth-input-border); border-radius: 0.3rem; padding: 0.35rem 0.55rem; font-size: 0.85rem; } .account-usage { margin: 0.5rem 0 0.4rem; font-size: 0.9rem; color: var(--auth-text); } .account-bar { height: 8px; background: rgba(0, 0, 0, 0.08); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; } .account-bar-fill { height: 100%; width: 0%; background: var(--auth-accent); transition: width 0.2s ease; } .account-files { margin-top: 0.5rem; } .danger-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--auth-border); } .btn-link { display: inline-block; font-size: 0.8rem; color: var(--auth-accent); text-decoration: none; margin: 0 0.35rem; padding: 0.15rem 0; } .btn-link:hover { text-decoration: underline; }