/* ===========================================================================
   SETTINGS - DavidsonHR's (its app.css "Settings", copied 2026-10-17): the title and its line, the sections in a strip
   down the left, the chosen section beside it. Drawn by Components/Pages/Settings/SettingsScreen. DavidsonHR's navy
   (#191F45) is this app's ink (app.css); everything else is DavidsonHR's own value. Its icons are the font's <i>; here
   they are the inline SVG icons (.sp-icon), the same Tabler shapes at the same 18px. */
.set-page { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.set-title { font-size: 27px; font-weight: 600; color: var(--app-black); margin: 0; }
.set-sub { font-size: 13.5px; color: #8a8f9a; margin: 2px 0 18px; }
.set-layout { display: flex; gap: 26px; min-height: 0; flex: 1; align-items: flex-start; }
.set-nav { flex: 0 0 210px; display: flex; flex-direction: column; gap: 2px; }
.set-nav button {
    display: flex; align-items: center; gap: 10px; text-align: left;
    border: 0; background: transparent; cursor: pointer; font: inherit;
    font-size: 14.5px; color: #333a4d; padding: 9px 14px; border-radius: 8px;
}
.set-nav button .sp-icon { width: 18px; height: 18px; color: #6a7186; }
.set-nav button:hover { background: #f1f2f6; }
.set-nav button.on { background: #e9edf9; color: var(--app-black); font-weight: 600; }
.set-nav button.on .sp-icon { color: #3d5296; }
.set-body { flex: 1; min-width: 0; }
.set-body .tab-pane { padding-top: 16px; }

/* ===========================================================================
   SETTINGS → INTEGRATIONS - Davidson HR's cards (its app.css "Settings — Integrations", copied 2026-10-17): two to a
   row, one when narrow; each card a column so its one button sits on the card's floor. The button: black to Connect,
   green once Connected, amber when it needs attention - its words say which, never the colour alone. */
.intg-grid { display: grid; grid-template-columns: repeat(2, 380px); gap: 14px; align-items: stretch; margin-top: 10px; }
.intg-grid > .intg-card { width: auto; }
@media (max-width: 1100px) { .intg-grid { grid-template-columns: minmax(0, 380px); } }
.intg-card { border: 1px solid #e4e7ee; border-radius: 8px; background: #fbfcfe; padding: 14px 16px; width: 380px;
             display: flex; flex-direction: column; }
.intg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.intg-name { font-size: 15px; font-weight: 700; color: var(--app-black); display: inline-flex; align-items: center; gap: 8px; }
.intg-logo { height: 22px; width: auto; display: block; }
.intg-logo.resend { height: 18px; }
.intg-plug { font-size: 18px; color: #9aa3b2; display: inline-flex; }
.intg-plug.on { color: #1c7a44; }
.intg-plug.warn { color: #b25a12; }
.intg-desc { font-size: 13px; color: #444; margin: 0 0 12px; flex: 1 1 auto; }
.intg-card > .cmd-btn { width: 100%; justify-content: center; margin-top: auto; }
.btn-intg-connect, .btn-intg-on, .btn-intg-warn { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.btn-intg-connect { background: #000; color: #fff; }
.btn-intg-connect:hover:not(:disabled) { background: #222; color: #fff; }
.btn-intg-connect:disabled { background: #000; color: #fff; opacity: .55; }
.btn-intg-on { background: #1c7a44; color: #fff; }
.btn-intg-on:hover:not(:disabled) { background: #166337; color: #fff; }
.btn-intg-warn { background: #fdeadd; color: #b25a12; }
.btn-intg-warn:hover:not(:disabled) { background: #fbdcc4; color: #b25a12; }
.intg-dlg-mark { height: 18px; display: block; margin: 0 0 12px; }
.xsteps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 14px; }
.xsteps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #8a8f9a; padding: 6px 8px; border-radius: 6px; background: #f3f5f9; }
.xsteps li span { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: #d9dde6; color: #fff; }
.xsteps li.on { color: #000; background: #eee; }
.xsteps li.on span { background: #000; color: #fff; }
.intg-howto { font-size: 13.5px; line-height: 1.55; padding-left: 20px; margin: 0; }
.intg-howto li { margin-bottom: 8px; }
/* The cog's details (Steven, 2026-10-17): the state as pills, the facts, then each part with its own Save. */
.intg-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.intg-facts { margin-bottom: 6px; }
.intg-sec { font-size: 13px; font-weight: 700; color: var(--app-black); margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid #eef0f4; }
.intg-inline { display: flex; gap: 8px; align-items: center; }
.intg-inline .edit-input { flex: 1; min-width: 0; }
.intg-inline .cmd-btn { white-space: nowrap; }

/* Settings -> Users -> Manage: Delete account's list of what it's tied to. */
.u-delete-list { margin: 4px 0 8px; padding-left: 20px; }