/* 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;
    --theme-font-family:    "Geologica";
    --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;
}