/* The platform's admin screens (Settings, System settings): a plain bordered panel, the tab strip, tables. */
.sp-panel { border: 1px solid #e3e7ee; border-radius: 8px; padding: 14px 16px; background: #fbfcfd; }
/* FOLDER TABS (DavidsonHR's .tabs / .tab-pane, 2026-10-15): grey outlined tabs over a white bordered pane; the open one
   is white, drops over the pane's top border to join it, and carries the brand colour along its top edge. They read
   best on a grey page (SHS's #F3F2F2). */
.sp-tabs { display: flex; gap: 3px; align-items: flex-end; flex-wrap: wrap; }
.sp-tab { border: 1px solid #ced4da; border-bottom: 0; background: var(--sp-tab-off, #eceff4); color: #555; border-radius: 7px 7px 0 0;
    padding: 8px 14px; min-width: 76px; text-align: center; font-size: 13.5px; font-weight: 600; text-decoration: none; position: relative; }
.sp-tab:hover { background: #fafafa; color: var(--sp-ink); }
.sp-tab.active { background: #fff; color: var(--sp-ink); margin-bottom: -1px; padding-bottom: 9px; z-index: 1;
    box-shadow: inset 0 3px 0 var(--sp-primary); }
.sp-tab-body { background: #fff; border: 1px solid #ced4da; border-radius: 0 6px 6px 6px; padding: 18px 20px; }
.sp-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; font-weight: 600; }
.sp-group-row th { background: #f4f6f9; text-transform: none; font-size: .85rem; color: #374151; }
.sp-paused td { opacity: .6; }
.sp-failed { color: #b42318; font-weight: 600; }
.sp-msg { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* View as: the band across the top of a View as tab. Words say "read only"; the colour only underlines it. */
.sp-viewas-bar { display: flex; align-items: center; gap: 12px; padding: 8px 20px; background: #7a3e00; color: #fff; }
.sp-viewas-bar span { flex: 1; }

/* The Manage dialog's facts and sections. */
.sp-facts { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; margin: 0; font-size: .9rem; }
.sp-facts dt { color: #6b7280; font-weight: 500; }
.sp-facts dd { margin: 0; }
.sp-manage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sp-manage-name { font-size: 1.1rem; font-weight: 600; }
.sp-pill { display: inline-block; border: 1px solid #c9d0db; border-radius: 12px; padding: 1px 10px; font-size: .8rem; background: #f8fafc; }

/* Tabs inside a tab (Settings → Email: Layout, Templates): the same folder shape, smaller, over their own pane. */
.sp-subtabs { display: flex; gap: 3px; align-items: flex-end; margin: 0; }
.sp-subtab { border: 1px solid #ced4da; border-bottom: 0; background: var(--sp-tab-off, #eceff4); padding: 6px 14px; color: #555;
    border-radius: 6px 6px 0 0; margin-bottom: -1px; font-size: 13px; font-weight: 600; }
.sp-subtab:hover { background: #fafafa; color: var(--sp-ink); }
.sp-subtab.active { background: #fff; color: var(--sp-ink); margin-bottom: -1px; padding-bottom: 7px; position: relative; z-index: 1;
    box-shadow: inset 0 2px 0 var(--sp-primary); }
/* The sub-tab's own pane, inside the outer one: bordered the same way, a little tighter. */
.sp-subtab-body { border: 1px solid #ced4da; border-radius: 0 6px 6px 6px; padding: 16px 18px; background: #fff; }

/* A white card for a page that isn't tabbed (My account, Home), so it sits on the grey page like a tab's pane. */
.sp-card { background: #fff; border: 1px solid #ced4da; border-radius: 6px; padding: 18px 20px; }
.sp-section-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 700; margin: 22px 0 8px; }
.sp-slot { border: 1px dashed #c9d0db; border-radius: 8px; padding: 10px; max-width: 640px; }
.sp-slot img { display: block; max-width: 100%; height: auto; }
.sp-chip { border: 1px solid #c9d0db; background: #f8fafc; border-radius: 14px; padding: 2px 10px; font-size: .8rem;
    font-family: Consolas, monospace; color: #1f2937; }
.sp-chip:hover { background: #eef2f7; }
.sp-email-frame { width: 100%; height: 520px; border: 1px solid #e3e7ee; border-radius: 6px; background: #fff; }

/* The account screens (AuthCard and the pages in it): from DavidsonHR.Shared.Ui's login-card.css and the auth section of
   DavidsonHR.Crm's app.css. Plain (not scoped) CSS, served as platform/account.css: RCL scoped
   CSS across the project boundary is unreliable. The page colour comes from PlatformAppOptions.BrandColor. */

.sp-auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sp-auth-page .login-card { max-width: 420px; width: 100%; }
/* A button mid-submit (busy-forms.js). It swallows further presses, so it must LOOK unavailable too. The words change as
   well as the shade ("Signing in…"), so this never leans on the dimming alone. */
.sp-auth-page .is-busy,
.sp-auth-page .is-busy:hover { opacity: .65; cursor: progress; }

.login-card { position: relative; z-index: 1; overflow: hidden; border: 0; }
.login-card-logo { padding: 1.25rem 0 .75rem; text-align: center; }
.login-card-logo img { height: auto; display: block; margin: 0 auto; }
.login-card-name { display: block; color: #fff; font-size: 1.35rem; font-weight: 600; letter-spacing: .02em; padding: .25rem 0 .5rem; }

.login-pw-wrap { position: relative; }
.login-pw-wrap .form-control { padding-right: 2.5rem; }
/* ONE reveal button, ours. Edge draws its own eye inside a password box once something is typed, which put two side by
   side. Hidden only in boxes that have our toggle. */
.login-pw-wrap input::-ms-reveal,
.login-pw-wrap input::-ms-clear { display: none; }
.login-pw-toggle { position: absolute; top: 50%; right: .375rem; transform: translateY(-50%); background: none; border: none;
    padding: .375rem; cursor: pointer; color: #7a8195; display: flex; align-items: center; }
.login-pw-toggle:hover { color: #191F45; }

.login-btn { background: var(--sp-primary, #191F45); color: #fff; font-weight: 500; }
.login-btn:hover { background: var(--sp-primary-hover, #2a3358); color: #fff; }

.login-forgot { color: #344767; text-decoration: none; font-size: .9rem; }
.login-forgot:hover { text-decoration: underline; }

.auth-signout { min-width: 130px; }
.auth-title { color: var(--sp-ink, #191F45); }
.auth-sub { font-size: .9rem; }
.auth-h { font-size: 18px; font-weight: 700; color: #16233f; margin: 0 0 12px; }
.auth-lead { font-size: 14px; color: #444; }
.auth-help { text-align: center; margin: 4px 0 0; }

/* The password rules under a new-password box (PasswordRules). Two columns so the rules don't push the card off a laptop
   screen. The marker is drawn: a bullet until the rule is met, then a tick in the SAME box - so nothing shifts as it
   changes. Tick and bullet are different shapes; the green is never the only difference. */
.pw-rules { margin: -8px 0 16px; font-size: 13px; line-height: 1.45; color: #4b5563; }
.pw-rules ul { margin: 2px 0 0; padding-left: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; list-style: none; }
.pw-rules li { position: relative; }
.pw-rules li::before { content: "\2022"; position: absolute; left: -16px; top: 0; width: 14px; text-align: center; color: #4b5563; }
.pw-rules li.met::before { content: "\2713"; color: #15803d; font-weight: 700; }

/* A button that reads as a link (opens a help dialog). Underlined so it doesn't depend on colour alone. */
.linkish { border: 0; background: none; padding: 0; font-size: 13px; color: #31527a;
    text-decoration: underline; cursor: pointer; font-family: inherit; }
.auth-steps .linkish, .form-label .linkish { font-size: inherit; }

/* The help pop-ups (<dialog class="howto">, page-actions.js). */
.howto { border: 0; border-radius: 8px; padding: 0; width: 420px; max-width: 92vw;
    max-height: 86vh; box-shadow: 0 18px 50px rgba(0,0,0,.4); color: #374151; }
.howto::backdrop { background: rgba(10,18,32,.55); }
.howto-head { padding: 14px 18px; border-bottom: 1px solid #e9ecef; font-weight: 700;
    color: #191F45; display: flex; align-items: center; }
.howto-head button { margin-left: auto; border: 0; background: none; font-size: 18px;
    color: #8a8f9a; cursor: pointer; line-height: 1; }
.howto-body { padding: 14px 18px 20px; font-size: 13.5px; line-height: 1.6; overflow-y: auto; }
.howto-body .howto-steps { margin: 4px 0 10px; padding-left: 20px; }
.howto-body .howto-steps li { margin-bottom: 4px; }
.auth-more-h { font-weight: 700; color: #191F45; margin: 10px 0 2px; }
.auth-key { margin: 6px 0 8px; }
.auth-key code { font-size: 14px; letter-spacing: .09em; color: #16233f; }

/* The setup steps carry the QR and the code box inside them, so they need room and the numbers must stay aligned with the
   first line of each step. */
.auth-steps { margin: 0 0 14px 0; padding-left: 20px; font-size: 14px; color: #444; }
.auth-steps > li { margin-bottom: 9px; }
.auth-steps > li::marker { font-weight: 600; color: #16233f; }
.auth-verify { display: flex; gap: 8px; margin-top: 7px; }
.auth-verify .form-control { flex: 1; min-width: 0; }
.auth-verify .btn { flex: none; padding-left: 20px; padding-right: 20px; }
.auth-qr { display: flex; justify-content: flex-start; margin: 8px 0 2px; }

/* ======================================================================================================================
   THE APP'S CONTROLS (DavidsonHR.Crm's app.css, 2026-10-15): command buttons, pills, the dialog shell, the avatar, My
   account, the Users screen. The colours are VARIABLES, so each app sets its own brand (SHS: red and black, in its
   app.css) and the platform keeps DavidsonHR's navy as the default.
   ====================================================================================================================== */
:root {
    --sp-primary: #191F45;        /* the committing button */
    --sp-primary-hover: #232b5c;
    --sp-ink: #191F45;            /* headings, dialog titles, labels */
    --sp-line: #e5e5e5;
    --sp-soft: #f4f5f7;
    --sp-danger: #b32121;
    --sp-focus: #6f8fd6;
}

.muted { color: #6b6b6b; font-size: .9rem; }
.cell-sub { font-size: 12px; color: #666; margin-top: 1px; }
.grow { flex: 1; min-width: 0; }

/* Command buttons. A link dressed as one must not keep the underline. */
.cmd-btn { background: transparent; border: 0; padding: 6px 12px; font-size: 14px; color: #222; cursor: pointer; border-radius: 4px;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-family: inherit; line-height: 1.4; }
.cmd-btn:hover:not(:disabled) { background: #f0f0f0; text-decoration: none; }
.cmd-btn:disabled { color: #999; cursor: default; }
.cmd-btn-outline { border: 1px solid #c8c8c8; background: #fff; }
.cmd-btn-primary { background: var(--sp-primary); border: 1px solid var(--sp-primary); color: #fff; font-weight: 600; }
.cmd-btn-primary:hover:not(:disabled) { background: var(--sp-primary-hover); color: #fff; }
.cmd-btn-primary:disabled { background: var(--sp-primary); color: #fff; opacity: .45; }
.cmd-btn-danger { color: var(--sp-danger); border: 1px solid #e0b4b4; background: #fff; font-weight: 600; }
.cmd-btn-danger:hover:not(:disabled) { background: #fbe9e9; color: var(--sp-danger); }
.cmd-btn-sm { padding: 3px 10px; font-size: 12.5px; }
.cmd-btn img { flex: none; }
.panel-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.info-btn { border: 0; background: transparent; color: #6b7280; font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1; }
.info-btn:hover { color: var(--sp-ink); }

/* Pills. The WORD is the state; the colour only underlines it. */
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 11px; line-height: 1.4; white-space: nowrap; }
.pill-ok { background: #e3f3e8; color: #17663a; }
.pill-info { background: #e7eefc; color: #1d3f91; }
.pill-warn { background: #fff2dc; color: #8a5300; box-shadow: inset 0 0 0 1.5px #c98a1b; }
.pill-off { background: #f1f1f1; color: #444; box-shadow: inset 0 0 0 1.5px #888; }
.pill-muted { background: #eef0f4; color: #555; }

/* Notes and errors: the words carry it, never the colour alone. */
.section-note { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 10px 14px; border: 1px solid #cfe3d4;
    border-left: 4px solid #1c7a44; border-radius: 6px; background: #f3faf5; font-size: 13.5px; }
.section-note.info { border-color: #cdd8ef; border-left-color: #4a6fb5; background: #f4f7fd; }
.section-error { display: flex; align-items: center; gap: 7px; color: var(--sp-danger); font-size: 13.5px; font-weight: 600;
    background: #fbe9e9; border-radius: 6px; padding: 7px 12px; margin: 10px 0; }

/* Forms: labels above fields. */
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--sp-ink); margin-bottom: 5px; }
.edit-input { width: 100%; box-sizing: border-box; border: 1px solid #c8c8c8; border-radius: 5px; padding: 6px 10px; font-size: 13.5px;
    font-family: inherit; color: #222; background: #fff; }
.edit-input:focus { outline: none; border-color: var(--sp-focus); box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
.edit-input:disabled { background: #f2f3f6; color: #a2a6b3; border-color: #e2e4ea; }

/* The dialog shell (AppDialog). */
.dlg-overlay { position: fixed; inset: 0; background: rgba(16,16,16,.5); z-index: 1050; display: none; align-items: center; justify-content: center; padding: 20px; }
.dlg-overlay.open { display: flex; }
.dlg { background: #fff; border-radius: 10px; width: 620px; max-width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.35); max-height: 88vh;
    display: flex; flex-direction: column; }
.dlg-head { padding: 14px 20px; border-bottom: 1px solid var(--sp-line); display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--sp-ink); }
.dlg-head .x { margin-left: auto; border: 0; background: transparent; font-size: 20px; color: #8a8f9a; cursor: pointer; line-height: 1; }
.dlg-head .x:hover { color: #222; }
.dlg-head .x:disabled { color: #c5c8d0; cursor: default; }
.dlg-body { padding: 16px 20px; overflow-y: auto; }
.dlg-foot { padding: 12px 20px; border-top: 1px solid var(--sp-line); display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.dlg-foot .cmd-btn { white-space: nowrap; flex: 0 0 auto; }
.dlg-foot form { margin: 0; }

/* THE avatar circle (Avatar.razor). Font pinned: it is a <button> in some places and a <span> in others. */
.who { width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; background: #6f8fd6; color: #fff; font-family: inherit;
    font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; padding: 0; border: 0;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.who.av-lg { width: 38px; height: 38px; font-size: 14px; }
.who.who-tight { font-size: 9px; letter-spacing: -.02em; }
.who.who-tight.av-lg { font-size: 12px; }
.who-neutral { background: #8a90a6 !important; color: #fff !important; }
button.who { cursor: pointer; }
button.who:hover { filter: brightness(1.12); }

/* The header's account menu (page-actions.js opens it). */
.sp-user { position: relative; margin-left: auto; }
.sp-user-menu { position: absolute; right: 0; top: 46px; background: #fff; border: 1px solid #e3e6ee; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 230px; overflow: hidden; z-index: 60; display: none; }
.sp-user-menu.open { display: block; }
.sp-user-head { padding: 12px 14px; border-bottom: 1px solid #eef0f4; }
.sp-user-head .n { font-size: 14px; font-weight: 600; color: var(--sp-ink); }
.sp-user-head .e { font-size: 12px; color: #7a8195; }
.sp-user-note { padding: 10px 14px; font-size: 12.5px; color: #555; }
.sp-user-menu a, .sp-user-signout { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: 13px; color: #2b3142;
    text-decoration: none; width: 100%; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; }
.sp-user-menu a:hover, .sp-user-signout:hover { background: var(--sp-soft); }
.sp-user-menu svg { width: 16px; height: 16px; }

/* My account. */
.acct { max-width: 760px; }
.acct-h { font-size: 15px; font-weight: 600; color: var(--sp-ink); margin: 0 0 6px; }
.acct-sub-h { font-size: 13.5px; font-weight: 600; color: var(--sp-ink); margin: 20px 0 4px; }
.acct-preview { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
.acct-initials { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.acct-initials .form-field { margin: 0; }
.acct-initials-box { width: 96px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.acct-initials .cell-sub { padding-bottom: 6px; }
.acct-others { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin: 6px 0 4px; }
.acct-other { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #444; }
.swatch-grid { display: grid; grid-template-columns: repeat(7, 36px); gap: 9px; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ced4da; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.swatch:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--sp-ink); }
.swatch.mine { box-shadow: 0 0 0 2px var(--sp-ink); }
.swatch:disabled { cursor: default; opacity: .55; }
.swatch-owner { font-size: 10px; font-weight: 700; }
.acct-2fa { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border: 1px solid var(--sp-line);
    border-radius: 7px; padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.acct-2fa-state { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.acct-2fa-state .sp-icon { flex: none; margin-top: 1px; color: var(--sp-ink); }
.sp-icon { flex: none; vertical-align: -3px; }
.acct-2fa-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acct-2fa-actions form { margin: 0; }

/* The Users screen and its Manage dialog. */
.sp-grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #ced4da; font-size: 14px; }
.sp-grid th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #555; font-weight: 600;
    background: var(--sp-soft); padding: 9px 12px; border-bottom: 1px solid #ced4da; }
.sp-grid td { padding: 9px 12px; border-bottom: 1px solid #eceef2; vertical-align: middle; }
.sp-grid tbody tr:hover { background: #fafafa; }
.u-cell { display: flex; align-items: center; gap: 10px; }
.u-actions { text-align: right; white-space: nowrap; }
.u-roles { display: flex; flex-direction: column; gap: 7px; }
.u-role { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.u-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.u-reset { margin-top: 14px; padding: 12px 14px; border: 1px solid #e3c7c7; border-left: 4px solid var(--sp-danger); border-radius: 6px;
    background: #fdf6f6; font-size: 13.5px; }
.u-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.u-head-name { font-weight: 600; font-size: 15px; }
.u-head .pill { margin-left: auto; }
.u-head-av { width: 40px; height: 40px; font-size: 15px; }
.u-facts { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 0 0 4px; font-size: 13.5px; }
.u-facts dt { color: #6b7280; font-weight: 400; }
.u-facts dd { margin: 0; }
.inv-form .form-field { margin-bottom: 10px; }

/* A connection's status, the first thing on its screen: a word you can't miss, a line saying what it means. The word
   carries it (with a tick or warning sign); the colour only underlines it. */
.sp-status { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 8px; border: 1px solid; border-left-width: 6px; margin-bottom: 16px; }
.sp-status-word { font-size: 20px; font-weight: 700; line-height: 1.2; }
.sp-status-sub { font-size: 13.5px; color: #444; }
.sp-status.ok { background: #eef8f1; border-color: #bfe0c9; border-left-color: #1c7a44; }
.sp-status.ok .sp-status-word { color: #17663a; }
.sp-status.warn { background: #fff6e8; border-color: #f0d6a8; border-left-color: #c98a1b; }
.sp-status.warn .sp-status-word { color: #8a5300; }
.sp-status.off, .sp-status.none { background: #f5f5f5; border-color: #d9d9d9; border-left-color: #8a8a8a; }
.sp-status.off .sp-status-word, .sp-status.none .sp-status-word { color: #444; }

/* System settings → Email. */
.em-config { max-width: 760px; }
.em-h { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--sp-line); }
.em-config > .em-h:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
.em-lead { margin: 0 0 12px; font-size: 13px; }
.em-wide { max-width: 520px; }
.em-mid { max-width: 340px; }
.em-help { max-width: 560px; margin-top: 5px; }
.em-domain-state { font-size: 13px; margin-top: 6px; color: #333; }
.em-facts { margin-bottom: 14px; }
.em-redirect { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 700px) { .em-redirect { grid-template-columns: 1fr; } }
.em-provider { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.em-provider img { height: 20px; width: auto; display: block; }
.em-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.em-inline .edit-input { flex: 1 1 260px; }

/* Settings → Audit log: the filter bar above the grid - it becomes the database query. */
.au-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 10px; }
.au-filters .form-field { margin: 0; }
.au-filters input[type=date] { width: 150px; }
.au-filters #au-who, .au-filters #au-area { width: 170px; }
.au-filters .au-text { flex: 1 1 240px; }
.au-buttons { display: flex; gap: 8px; }
.au-count { margin: 0 0 8px; }