/* Terms and Conditions page (Pages/TermsAndConditionsPage.razor).

   Every rule here is under the .terms- prefix, which no other stylesheet in wwwroot/css
   uses. That matters because index.html loads all of these globally - there is no CSS
   isolation on this page - so an unprefixed .title or .body would reach every other screen.

   The page borrows only the shared public-screen chrome: .top-row-header /
   .login-app-brand from Login.css and .bottom-row-header / .bottom-row-footer*-login
   from Register.css, so Login, Register and this page share one top bar and one footer. */

/* html/body are overflow:hidden app-wide (CompanyInfo.css and DeleteAlert.css both set it,
   and one of them is always the last html/body rule loaded), so the document cannot scroll
   the page - it scrolls .terms-body instead. This shell is therefore pinned: 2.5rem down to
   clear Main.css's fixed .top-row-header strip, and 44px up to clear .bottom-row-header,
   which Register.css absolutely positions 14px from the bottom. */
.terms-page {
    position: fixed;
    top: 2.5rem;
    left: 0;
    right: 0;
    bottom: 44px;
    display: flex;
    justify-content: center;
    padding: 12px 20px 0;
    box-sizing: border-box;
}

/* Same white card, radius and shadow as Login's .login-form, widened for running text.
   min-height:0 is what lets the flex child below it actually scroll instead of growing the
   card past its parent. */
.terms-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    width: 100%;
    max-width: 920px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.terms-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid #e3e9f0;
    flex-shrink: 0;
}

.terms-card-head .terms-title {
    margin: 0;
    font-size: 17px;
    font-weight: bold;
    color: #333;
    line-height: 1.35;
}

/* app.css's .btn-primary is width:100% and would eat the whole head row, so the Back
   control is styled here rather than borrowing it. */
.terms-card-head .terms-back-btn {
    flex-shrink: 0;
    height: 30px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: sans-serif;
    color: #fff;
    background: #007BFF;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.terms-card-head .terms-back-btn:hover {
    background: #0069d9;
}

/* The only scroller on the page. */
.terms-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 24px 24px;
    font-size: 13px;
    line-height: 1.65;
    color: #333;
    text-align: justify;
}

/* PART A / PART B - the document's top level. */
.terms-body .terms-part {
    margin: 30px 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #007BFF;
    font-size: 16px;
    font-weight: bold;
    color: #007BFF;
    text-align: left;
}

/* The block headings that sit inside Part B: Specific Features and Integrations, Legal
   Disclaimers, Data Privacy, Payments, Miscellaneous, Contact Information. One step down
   from .terms-part so the nesting is visible. */
.terms-body .terms-group {
    margin: 26px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #cfe0f5;
    font-size: 15px;
    font-weight: bold;
    color: #0069d9;
    text-align: left;
}

/* Numbered sections and the named clauses under each group. */
.terms-body .terms-heading {
    margin: 20px 0 6px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: left;
}

.terms-body .terms-subheading {
    margin: 16px 0 4px;
    font-size: 13px;
    font-weight: bold;
    color: #555;
    text-align: left;
}

.terms-body .terms-text {
    margin: 0 0 12px;
}

/* The short "Key Provisions:" / "Features:" stubs that introduce a list - kept tight to
   the list that follows instead of carrying a full paragraph gap. */
.terms-body .terms-lead {
    margin: 12px 0 4px;
    font-weight: bold;
    color: #555;
    text-align: left;
}

.terms-body .terms-list,
.terms-body .terms-sublist {
    margin: 0 0 12px;
    padding-left: 22px;
}

.terms-body .terms-list > li,
.terms-body .terms-sublist > li {
    margin-bottom: 8px;
}

.terms-body .terms-sublist {
    margin-top: 8px;
    margin-bottom: 0;
    list-style-type: circle;
}

/* The source underlined and italicised these run-in labels ("Integrations:",
   "Real-Time Data Sync:"); underline reads as a link on screen, so they keep the italic
   and take a colour instead. */
.terms-body .terms-term {
    font-style: italic;
    font-weight: bold;
    color: #0069d9;
}

/* Limitation of Liability is one long all-caps block in the source. Boxed and given a
   slightly looser line height, because unbroken capitals at this size are hard to track. */
.terms-body .terms-caps {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #f9fcff;
    border-left: 3px solid #007BFF;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.7;
    color: #444;
}

.terms-body .terms-contact {
    line-height: 1.9;
}

/* Below this the card padding costs more than it buys, and the head stacks so a long title
   and the Back button stop competing for the same row. */
@media (max-width: 640px) {
    .terms-page {
        padding: 8px 10px 0;
    }

    .terms-card-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 16px;
    }

    .terms-body {
        padding: 4px 16px 20px;
        text-align: left;
    }
}