/* Default client theme
   Applied when no client-specific CSS file exists (client-{ClientCode}.css).
   Copy this file as client-{ClientCode}.css and adjust colours per client.

   All theme colours are CSS custom properties on :root so they can
   be overridden by the admin Theme page (inline <style> block).

   NOTE: Selectors must match or exceed the specificity used in
   SiteAug19.css to win. Use !important where SiteAug19 does. */

/* ===== Theme variables (admin-overridable) ===== */
:root {
    --theme-accent:         #66c6b8;
    --theme-accent-alt:     #1eb57b;
    --theme-heading-color:  #02516e;
    --theme-header-bg:      #ffffff;
    --theme-menu-bg:        #ffffff;
    --theme-menu-text:      #444444;
    --theme-menu-hover:     #66c6b8;
    --theme-submenu-bg:     #F2F2F2;
    --theme-submenu-text:   #5f5f5f;
    --theme-link-color:     #1eb57b;
    --theme-link-hover:     #02516e;
    --theme-button-bg:      #66c6b8;
    --theme-button-text:    #ffffff;
    --theme-button-hover-bg:    #ffffff;
    --theme-button-hover-text:  #66c6b8;
    --theme-footer-bg:      #292929;
    --theme-footer-text:    #cccccc;
    --theme-footer-accent:  #66c6b8;
    /* House font since 3 Sep 2026. Open Sans has a taller x-height and plainer
       letterforms than Geologica, which reads visibly crisper at 16px on the dense
       admin grids. Loaded by Site.Master with the other offered faces. TPOW and WCT
       are pinned back to Geologica in Utils.PinnedFontFamily -- established sites
       that were not asked. A site can override this on the Theme page. */
    --theme-font-family:    "Open Sans";
    --theme-font-size:      16px;
    --theme-heading-weight:  600;
    --theme-grid-header-bg:  #02516e;
    --theme-grid-header-text:#ffffff;
}

/* ===== Font family ===== */
body, #Top_bar .menu > li > a, #Top_bar .menu li ul li a,
input, button, select, textarea {
    font-family: var(--theme-font-family), "Segoe UI", Arial, sans-serif !important;
    font-size: var(--theme-font-size);
}

/* Buttons should also use the theme font */
a.button_theme, a.tp-button.button_theme,
button, input[type="submit"], input[type="reset"], input[type="button"],
.button, a.button {
    font-family: var(--theme-font-family), "Segoe UI", Arial, sans-serif !important;
}

/* ===== Header background ===== */
body:not(.template-slider) #Header_wrapper {
    /* default: let the per-client homepage-strip image show through */
}

/* ===== Top bar / navigation ===== */
#Top_bar {
    background-color: var(--theme-menu-bg) !important;
}

#Top_bar .menu > li > a {
    color: var(--theme-menu-text) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

#Top_bar .menu > li > a:hover,
#Top_bar .menu > li.hover > a {
    color: var(--theme-menu-hover) !important;
}

/* Sub-menu (dropdowns) */
#Top_bar .menu > li ul {
    background-color: var(--theme-submenu-bg) !important;
}

#Top_bar .menu > li ul li a {
    color: var(--theme-submenu-text) !important;
}

#Top_bar .menu > li ul li a:hover,
#Top_bar .menu > li ul li.hover > a {
    color: var(--theme-menu-hover) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ===== Mobile -- override SiteAug19 @media max-width:767px ===== */
@media only screen and (max-width: 767px) {
    #Top_bar {
        background-color: var(--theme-menu-bg) !important;
    }
}

/* ===== Links ===== */
a {
    color: var(--theme-link-color) !important;
}

a:hover {
    color: var(--theme-link-hover) !important;
}

/* ===== Buttons ===== */
a.button_theme, a.tp-button.button_theme,
button, input[type="submit"], input[type="reset"], input[type="button"],
.button, a.button {
    background-color: var(--theme-button-bg) !important;
    color: var(--theme-button-text) !important;
    border: 2px solid var(--theme-button-bg) !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease-in-out !important;
}

a.button_theme:hover, a.tp-button.button_theme:hover,
button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover,
.button:hover, a.button:hover {
    background-color: var(--theme-button-hover-bg) !important;
    color: var(--theme-button-hover-text) !important;
    border-color: var(--theme-button-bg) !important;
}

.button-stroke a.button.button_theme,
.button-stroke a.button.button_theme .button_icon i,
.button-stroke button,
.button-stroke input[type="submit"],
.button-stroke input[type="reset"],
.button-stroke input[type="button"] {
    border-color: var(--theme-button-bg) !important;
    color: var(--theme-button-bg) !important;
}

.button-stroke a.button.button_theme:hover,
.button-stroke button:hover,
.button-stroke input[type="submit"]:hover,
.button-stroke input[type="reset"]:hover,
.button-stroke input[type="button"]:hover {
    background-color: var(--theme-button-bg) !important;
    color: var(--theme-button-text) !important;
}

/* ===== Footer ===== */
#Footer {
    background-color: var(--theme-footer-bg) !important;
}

#Footer .footer_copy {
    background-color: var(--theme-footer-bg) !important;
    border-top: 1px solid var(--theme-footer-accent);
}

#Footer .footer_copy .copyright,
#Footer .footer_copy .copyright a {
    color: var(--theme-footer-text) !important;
}

/* ===== Mobile side-slide menu ===== */
#Side_slide {
    background-color: var(--theme-menu-bg) !important;
}

#Side_slide .menu_wrapper ul li a {
    color: var(--theme-menu-text) !important;
}

#Side_slide .menu_wrapper ul li a:hover {
    color: var(--theme-menu-hover) !important;
}

/* ===== Headings ===== */
h1, h1 a, h1 a:hover,
h5, h5 a, h5 a:hover {
    color: var(--theme-heading-color) !important;
    font-weight: var(--theme-heading-weight) !important;
}

h2, h2 a, h2 a:hover,
h3, h3 a, h3 a:hover {
    color: var(--theme-accent-alt) !important;
    font-weight: var(--theme-heading-weight) !important;
}

/* ===== Override SiteAug19 theme classes ===== */
.themecolor {
    color: var(--theme-accent) !important;
}

.themebg {
    background-color: var(--theme-accent) !important;
}

*::selection {
    background-color: var(--theme-accent) !important;
    color: #ffffff !important;
}

/* Menu active/current item indicators */
#Top_bar .menu > li.current-menu-item > a,
#Top_bar .menu > li.current_page_item > a,
#Top_bar .menu > li.current-menu-ancestor > a,
#Top_bar .menu > li.current-page-parent > a {
    color: var(--theme-menu-hover) !important;
}

#Top_bar a#header_cart span {
    background-color: var(--theme-accent) !important;
}

/* ===== Utility classes for inline style replacements ===== */
.theme-accent-text {
    color: var(--theme-accent) !important;
}

.theme-accent-bg {
    background-color: var(--theme-accent) !important;
}

.theme-accent-hr {
    height: 1px !important;
    border: none !important;
    color: var(--theme-accent) !important;
    background-color: var(--theme-accent) !important;
}

.theme-heading-text {
    color: var(--theme-heading-color) !important;
}

/* ===== Checkboxes & Radio buttons ===== */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--theme-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ===== Grid / Table styling ===== */
.gridview-modern {
    min-width: 100%;
    border-spacing: 0;
}

.gridview-modern th,
.gridheader th {
    background-color: var(--theme-grid-header-bg) !important;
    color: var(--theme-grid-header-text) !important;
    padding: 10px 12px !important;
    text-align: left !important;
    font-weight: 600;
    white-space: nowrap;
    border-color: var(--theme-grid-header-bg) !important;
}

.gridview-modern th a,
.gridheader th a {
    color: var(--theme-grid-header-text) !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-weight: inherit !important;
    text-decoration: none !important;
    display: inline !important;
    position: static !important;
    box-shadow: none !important;
    z-index: auto !important;
}

.gridview-modern th a:hover,
.gridheader th a:hover {
    color: var(--theme-grid-header-text) !important;
    background-color: transparent !important;
    text-decoration: underline !important;
    opacity: 0.85;
}

.gridview-modern td,
.gridrow td,
.gridalternatingrow td {
    padding: 8px 12px !important;
    border-bottom: 1px solid #e9ecef !important;
    border-color: #e9ecef !important;
    vertical-align: top !important;
    white-space: nowrap;
}

.gridrow {
    background-color: #ffffff;
}

.gridalternatingrow {
    background-color: #f8f9fa;
}

.gridview-modern tr:hover td {
    background-color: #e9ecef !important;
}

.gridpager td {
    padding: 10px 12px !important;
    text-align: center !important;
    background-color: transparent !important;
}

.gridpager a,
.gridpager span {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 2px;
    border-radius: 4px;
    text-decoration: none !important;
}

.gridpager a {
    color: var(--theme-link-color) !important;
    border: 1px solid #dee2e6;
}

.gridpager a:hover {
    background-color: var(--theme-accent) !important;
    color: #ffffff !important;
    border-color: var(--theme-accent) !important;
}

.gridpager span {
    background-color: var(--theme-accent) !important;
    color: #ffffff !important;
    font-weight: 600;
    border: 1px solid var(--theme-accent);
}

/* ===== Scrollbar styling (grid containers) ===== */
/* Override SiteAug19 which hides the native scrollbar -- we ALWAYS want it visible */
#gridScrollWrapper {
    -ms-overflow-style: auto !important;
    scrollbar-width: auto !important;
    scrollbar-color: var(--theme-accent) #e0e0e0 !important;
}

#gridScrollWrapper::-webkit-scrollbar {
    display: block !important;
    height: 18px !important;
    width: auto !important;
}

#gridScrollWrapper::-webkit-scrollbar-track {
    background: #e8e8e8;
    border-radius: 9px;
}

#gridScrollWrapper::-webkit-scrollbar-thumb {
    background: var(--theme-accent);
    border-radius: 9px;
    border: 3px solid #e8e8e8;
}

#gridScrollWrapper::-webkit-scrollbar-thumb:hover {
    background: var(--theme-accent-alt);
}

/* Legacy shadow scrollbar (no longer used) */
#shadowScrollbarContainer {
    display: none !important;
}

/* ===== Sticky Grid Panel: floating header + scrollbar ===== */
#stickyGridPanel {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 9998;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: #fff;
}

#stickyHeaderWrap {
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
}

#stickyHeaderWrap table {
    border-collapse: collapse !important;
    margin: 0 !important;
}

#stickyHeaderWrap th {
    position: static !important;
}

#stickyScrollbar {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    height: 34px;
    background-color: #e0e0e0;
    border-top: 2px solid #bbb;
}

#stickyScrollbar::-webkit-scrollbar {
    height: 26px;
}

#stickyScrollbar::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 13px;
}

#stickyScrollbar::-webkit-scrollbar-thumb {
    background: var(--theme-accent);
    border-radius: 13px;
    border: 4px solid #e0e0e0;
    min-width: 80px;
}

#stickyScrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--theme-accent-alt);
}

/* Firefox */
#stickyScrollbar {
    scrollbar-width: auto;
    scrollbar-color: var(--theme-accent) #e0e0e0;
}

#stickyScrollbarInner {
    height: 1px;
}

/* ===== Tree logo (badge style for dark headers) ===== */
#masterTreeLogo {
    margin-left: 12px;
}

#masterTreeLogo img {
    border-radius: 50%;
    max-height: 50px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ===== Whakapapa parent names -- black text ===== */
.whakapapaForm {
    color: #000000 !important;
}

div[id*="TreeView"] a {
    color: #000000 !important;
}

div[id*="TreeView"] a:hover {
    color: var(--theme-accent) !important;
}

/* Whakapapa tree person name buttons -- black text */
button.treePersonBtn {
    color: #000000 !important;
    background-color: #ffffff !important;
    border: 2px solid var(--theme-accent) !important;
}

button.treePersonBtn:hover {
    color: #000000 !important;
    background-color: #f8f8f8 !important;
}
