/* Office frame — top bar, sign-in card, toasts. Colors and type come from the --mf-* variables
   in ui.css (light and dark; the body carries .mf-page on every office screen). */

* { box-sizing: border-box; }
html, body { margin: 0; }
body.mf-page { background: var(--mf-bg); color: var(--mf-text); font-family: var(--mf-font); -webkit-font-smoothing: antialiased; }
a { color: var(--mf-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Top bar ---------- */
.rt-top {
    position: sticky; top: 0; z-index: 1000;
    background: var(--mf-bar);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--mf-line);
}
.rt-top-in { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 52px; display: flex; align-items: center; gap: 28px; }
.rt-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; color: var(--mf-text); letter-spacing: -0.01em; }
.rt-brand:hover { text-decoration: none; }
.rt-logo {
    width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #2b8cff, #0062d6); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
.rt-tabs { display: flex; gap: 4px; flex: 1; }
.rt-tabs a { color: var(--mf-text-2); font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 8px; }
.rt-tabs a:hover { color: var(--mf-text); background: var(--mf-fill); text-decoration: none; }
.rt-tabs a.on { color: var(--mf-text); font-weight: 600; background: var(--mf-fill); }
.rt-user { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mf-text-2); }

/* ---------- Sign-in ---------- */
.rt-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.rt-login-card {
    width: min(400px, 100%); background: var(--mf-card); border-radius: 20px; padding: 36px 28px 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 20px 50px rgba(0, 0, 0, 0.08); text-align: center;
}
.rt-login-logo {
    width: 56px; height: 56px; border-radius: 15px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #2b8cff, #0062d6); color: #fff; font-weight: 800; font-size: 20px;
    box-shadow: 0 6px 16px rgba(0, 98, 214, 0.3);
}
.rt-login-card h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.rt-login-fields { margin: 22px 0 8px; text-align: left; background: var(--mf-bg); }
.rt-login-fields .mf-row > span:first-child { width: 92px; color: var(--mf-text-2); font-size: 14px; }
.rt-login-hint { font-size: 14px; color: var(--mf-text-2); margin: 20px 0 0; }
.rt-login-error { min-height: 20px; color: var(--mf-red-text); font-size: 14px; margin: 8px 0; }
.rt-login-btn { width: 100%; padding: 12px; font-size: 16px; }
.rt-login-foot { margin: 18px 0 0; font-size: 13px; }

/* Inputs outside the Manifests screen use the same quiet style */
.mf-page input:not([type=checkbox]), .mf-page select, .mf-page textarea {
    font-family: inherit; font-size: 15px; color: var(--mf-text);
    border: 1px solid transparent; background: transparent; border-radius: 8px;
    padding: 6px 8px; min-width: 0; flex: 1; outline: none; transition: background .15s, border-color .15s, box-shadow .15s;
}
.mf-page input:focus, .mf-page select:focus, .mf-page textarea:focus { background: var(--mf-card); border-color: var(--mf-blue); box-shadow: 0 0 0 3px var(--mf-blue-soft); }

/* ---------- Toasts ---------- */
#rt-toasts { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 5000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.rt-toast {
    pointer-events: auto; padding: 11px 18px; border-radius: 980px; font-size: 14px; font-weight: 500; color: #fff;
    background: rgba(29, 29, 31, 0.92); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s;
}
.rt-toast.in { opacity: 1; transform: none; }
.rt-toast-success { background: rgba(36, 138, 61, 0.95); }
.rt-toast-error { background: rgba(215, 0, 21, 0.95); }

@media (max-width: 768px) {
    .rt-top-in { padding: 6px 12px; gap: 4px 12px; height: auto; min-height: 52px; flex-wrap: wrap; }
    .rt-user { min-width: 0; margin-left: auto; }
    .rt-user span { display: none; }
    /* the tab strip gets its own row and scrolls sideways instead of widening the page */
    .rt-tabs { order: 3; flex: 1 1 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .rt-tabs::-webkit-scrollbar { display: none; }
    .rt-tabs a { flex: none; white-space: nowrap; }
}

/* ---------- Stop updates (WhatsApp review list, public_html/office/stop-updates.php) ---------- */
.rt-badge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px; border-radius: 9px; background: var(--mf-red, #ff3b30); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: 1px; }
.su-list { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.su-card { cursor: default; text-align: left; }
.su-card:hover { transform: none; }
.su-raw { white-space: pre-wrap; word-break: break-word; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--mf-fill); border-radius: 10px; padding: 10px 12px; margin: 0; }
.su-reason { font-size: 13px; color: var(--mf-orange-text); }
.su-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.su-hist { font-size: 12px; color: var(--mf-text-3); }
.su-head { margin: 28px 4px 10px; font-size: 15px; font-weight: 600; color: var(--mf-text-2); }

/* Inside the office app (More → an old page in a frame, Page::embedded): no top bar, less room above */
body.mf-embed .mf { padding-top: 10px; }
body.mf-embed .rt-top { display: none; }   /* a frame the server could not tell (Page::start's in-frame check, finish wave M7) */
.rt-tabs .rt-app-link { font-weight: 700; }
/* Deep link target (stop-updates.js / drivers.js jumpToHash): a short orange ring */
.mf-flash { animation: mf-flash 2.4s ease-out 1; }
@keyframes mf-flash { 0%, 35% { box-shadow: 0 0 0 3px #f0883e; } 100% { box-shadow: 0 0 0 0 transparent; } }