/*
 * Vacation Bay theme — override stylesheet.
 *
 * Light canvas, slim Teal→Navy header strip, white cards, Navy headlines,
 * brand Green as the primary action color. Mirrors the live tpfinancial.com
 * presentation. Color tokens come from /styles/themes/color-schemes/
 * professional-tpf.css; this file is the structural / surface treatment.
 */

/*--------------------------------------------------------------------------
 * 1. Body canvas
 *------------------------------------------------------------------------*/
body.theme-professional-tpf {
    background: var(--background-backdrop);
    background-image: none;
    color: var(--text-color);
}

/*--------------------------------------------------------------------------
 * 2. Header strip — brand-approved Teal→Navy gradient (PDF pg 12). The
 *    gradient is the header treatment, not the body background.
 *
 *    Horizontal-menu layout: gradient runs left→right across the header.
 *    Vertical-menu layout: gradient runs top→bottom down the side rail.
 *------------------------------------------------------------------------*/
body.theme-professional-tpf div.head {
    background: linear-gradient(90deg, var(--color-navy) 20%, 90%, var(--color-green) 110%);
}
body.theme-professional-tpf.vertical-menu div.head {
    background: linear-gradient(125deg, var(--color-navy) 20%, 90%, var(--color-green) 110%);
}

/* Brand logo block sits inside the strip — keep it transparent so the
 * gradient shows through. */
body.theme-professional-blue div.header-branding,
body.theme-professional-blue.vertical-menu div.header-branding {
    background-color: white;
}

/* Header dropdown buttons: white text on the gradient. */
body.theme-professional-tpf .header-navigation .dropbtn,
body.theme-professional-tpf .header-navigation .top-link-button,
body.theme-professional-tpf .header-navigation .top-link-button a,
body.theme-professional-tpf .top-link-generic {
    color: white;
    background-color: transparent;
}

/* Hover state for top-level nav buttons: gentle white-on-glass tint. */
body.theme-professional-tpf .top-link-button:hover,
body.theme-professional-tpf .header-navigation .dropdown:hover .dropbtn {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Internal/admin role pills inside the dropdown panels — keep them on the
 * white panel surface, not transparent. */
body.theme-professional-tpf a.dropdown.access-feature-internal {
    background-color: #eef1f3;
}
body.theme-professional-tpf a.dropdown.access-feature-admin {
    background-color: #f5f7f8;
}

/*--------------------------------------------------------------------------
 * 3. Dropdown panels — white surface, hairline border, soft shadow,
 *    dark text. Replaces the dark-teal panel from the prior version.
 *------------------------------------------------------------------------*/
body.theme-professional-tpf .header-navigation .dropdown-content {
    background-color: white;
    border: 1px solid #e2e7ea;
    box-shadow: 0 4px 12px rgba(3, 59, 76, 0.08);
}
body.theme-professional-tpf .dropdown-content a {
    color: var(--text-color);
}
body.theme-professional-tpf .dropdown-content a:hover {
    background-color: #eaf6e3 !important;   /* pale Green tint */
    color: #033b4c;
}

/*--------------------------------------------------------------------------
 * 4. Headline hierarchy (PDF pg 10).
 *      h1 / h2 — Green
 *      h3      — Navy
 *      h4 / h5 — keep their common.css gray defaults
 *------------------------------------------------------------------------*/
body.theme-professional-tpf h1,
body.theme-professional-tpf h2 {
    color: var(--color-1);
}
body.theme-professional-tpf h3 {
    color: var(--color-1);
}

/*--------------------------------------------------------------------------
 * 5. Cards — give the white .content / .content-section / .modal-content
 *    a hairline border + soft shadow so they read as cards on the light
 *    canvas. (Common.css already paints them white.)
 *------------------------------------------------------------------------*/
body.theme-professional-tpf .content,
body.theme-professional-tpf .content-section,
body.theme-professional-tpf .modal-content {
    border: 1px solid #e5e8eb;
    box-shadow: 0 1px 3px rgba(3, 59, 76, 0.04);
}

/*--------------------------------------------------------------------------
 * 6. Inputs — white surface, gray border, green focus ring.
 *------------------------------------------------------------------------*/
body.theme-professional-tpf input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
body.theme-professional-tpf select,
body.theme-professional-tpf textarea {
    background-color: white;
    color: var(--text-color);
    border: 1px solid #c7ced3;
}
body.theme-professional-tpf input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):focus,
body.theme-professional-tpf select:focus,
body.theme-professional-tpf textarea:focus {
    outline: none;
    border-color: var(--color-gray);
    box-shadow: 0 0 0 2px rgba(110, 190, 74, 0.25);
}
.btn.btn-symbol-2.btn-secondary {
    background-color: var(--color-gray);
    border-color: var(--color-gray);
}
.btn-info {
    background-color: var(--color-teal);
    border-color: var(--color-teal);
}

/*--------------------------------------------------------------------------
 * 7. Misc surfaces. Light backgrounds where the dark-mode-style override
 *    set everything to teal blocks.
 *------------------------------------------------------------------------*/
body.theme-professional-tpf .linked-popup {
    background-color: white;
    color: var(--text-color);
    border-color: #e2e7ea;
}
body.theme-professional-tpf .modal-footer,
body.theme-professional-tpf .jq-dropdown .jq-dropdown-menu,
body.theme-professional-tpf .jq-dropdown .jq-dropdown-panel {
    background-color: white;
}

body.theme-professional-tpf {
    scrollbar-color: #c4cdd2 #f5f7f8;
}

/*--------------------------------------------------------------------------
 * 8. Plugin surfaces that hard-code colors in their own CSS — restate them
 *    here so they participate in the theme. Each block replaces the
 *    teal-everywhere overrides from the prior dark version.
 *------------------------------------------------------------------------*/

/* Relative Strength Journal */
body.theme-professional-tpf .rsj-data-controls {
    background-color: white;
    border: 1px solid #e5e8eb;
}
body.theme-professional-tpf .rsj-journal-date .rsj-journal-item:nth-child(2n) {
    background-color: #f5f7f8;
}
body.theme-professional-tpf .rsj-journal-date .rsj-journal-item:nth-child(2n+1) {
    background-color: #ffffff;
}
body.theme-professional-tpf .rsj-journal-date.number-column {
    color: var(--text-secondary);
}
body.theme-professional-tpf .rsj-journal-date-text,
body.theme-professional-tpf .rsj-journal-item > * {
    border-color: #e5e8eb;
}
body.theme-professional-tpf .rsj-journal-item-ticker a {
    color: var(--text-color);
}
body.theme-professional-tpf .rsj-journal-item.invalid-item,
body.theme-professional-tpf .rsj-journal-date .rsj-journal-item:nth-child(2n).invalid-item {
    background-color: #f0f2f4;
    color: #9aa5ad;
}
body.theme-professional-tpf .rsj-journal-item.invalid-item .rsj-journal-item-ticker a,
body.theme-professional-tpf .rsj-journal-item.invalid-item .rsj-journal-item-ticker b,
body.theme-professional-tpf .rsj-journal-item.invalid-item .rsj-journal-item-ppo {
    color: #9aa5ad !important;
}
body.theme-professional-tpf .rsj-journal-item.invalid-item .rsj-journal-item-histogram {
    background-color: #e2e7ea !important;
}

/* Screener panels — soft card on the canvas. */
body.theme-professional-tpf .screener .screener-selections {
    background-color: white;
    border: 1px solid #e5e8eb;
    border-radius: 4px;
    padding: 0.75em;
    margin-bottom: 0.5em;
}
body.theme-professional-tpf .screener .screener-selections > label > span {
    color: var(--text-secondary);
}
body.theme-professional-tpf .screener hr {
    border-color: #e5e8eb;
}

/* Dividend Reports input panel */
body.theme-professional-tpf .div-report-inputs {
    background: white;
    border-color: #e5e8eb;
}

/* PPO Report popup — ensure the Bootstrap btn-light reads on white. */
body.theme-professional-tpf #ppo-report-popup .ppo-report-chart-technicals-holder {
    border-color: #e5e8eb;
}
body.theme-professional-tpf #ppo-report-popup .btn-light {
    background-color: #f5f7f8;
    color: var(--text-color);
    border-color: #d4dade;
}

/* common.css hard-codes div.section-2 to a tan rgb(215,215,190); restate it
 * here as a white card with the same border treatment as .content-section. */
body.theme-professional-tpf div.section-2 {
    background: white;
    border: 1px solid #e5e8eb;
    box-shadow: 0 1px 3px rgba(3, 59, 76, 0.04);
}

/* footer.css hard-codes div.footer color to white (designed for the legacy
 * dark-bottomed body). On the light canvas the footer needs dark text. */
body.theme-professional-tpf div.footer,
body.theme-professional-tpf div.footer a {
    color: var(--text-secondary);
}
body.theme-professional-tpf div.footer a {
    text-decoration: underline;
}

/*************************************************************************/
/*       9. BRANDED MEDIA                                                */
/*************************************************************************/
body.theme-professional-tpf {
    img.logo {
        content: url("/public/logo_tpf.jpeg");
    }
    img.logo-small {
        content: url("/branded_media/TPF/Logo_TPF_white.jpeg");
        max-height: 58px;
    }
    img.logo-small-firm {
        content: url("/branded_media/TPF/Logo_TPF_white.jpeg");
    }
    .login-logo {
        height:100px;
        width:300px;
        margin-bottom:30px;
    }
    .login-tm-mark {
        display: none;
    }
}

/*************************************************************************/
/*       10. MOBILE ADJUSTMENTS                                          */
/*************************************************************************/
@media (max-width: 768px) {
    body.theme-professional-tpf {
        img.logo-small {
            content: url("/branded_media/TPF/Logo_TPF_white.jpeg");
            max-height: 48px;
        }
        .login-section .with-help-tooltip > *[title] {
            display: none;
        }
        .message-box,
        .login-box {
            margin-left: 18vw;
            width: 60vw;
        }
    }
}

@media (max-width: 620px) {
    body.theme-professional-tpf {
        img.logo-small {
            content: url("/branded_media/TPF/Logo_TPF_white.jpeg");
            max-height: 38px;
        }
        .login-logo {
            height:70px;
            width:210px;
            margin-bottom:30px;
        }
    }
}

@media (max-width: 400px) {
    body.theme-professional-tpf {
        img.logo-small {
            content: url("/branded_media/TPF/Logo_TPF_white.jpeg");
            max-height: 28px;
        }
        .login-logo {
            height:50px;
            width:150px;
            margin-bottom:30px;
        }
    }
}