/* Tech Guru client area: theme fixes from the page-by-page check of 31 October 2026 (includes/hooks/tg_ca_services.php
   loads it on every client area page). */

/* sidebar: the page you are on was blue text on a blue bar (unreadable on My Quotes, Add Funds, Support Tickets ...) */
.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{background-color:#1f5fa8!important;border-color:#1f5fa8!important;color:#fff!important}
/* includes/hooks/techguru_client_theme.php paints the sidebar's active row teal with a stronger selector: the blue of the new pages wins */
#main-body .sidebar .list-group-item.active,#main-body .sidebar .list-group-item.active:hover,#main-body .sidebar .list-group-item.active:focus{background:#1f5fa8!important;border-color:#1f5fa8!important}
.list-group-item.active *,.list-group-item.active:hover *{color:#fff!important}
.list-group-item.active .badge{background:rgba(255,255,255,.22)!important}

/* page header breadcrumb (every page): the theme draws it teal and grey on the navy band, hard to read. Light blue links and a
   white current page instead */
.tt-page-header-info .tt-breadcrumb .breadcrumb-item,.tt-page-header-info .tt-breadcrumb .breadcrumb-item.active{color:#fff!important;font-size:14px;font-weight:600}
.tt-page-header-info .tt-breadcrumb .breadcrumb-item a{color:#9fd8f5!important;font-weight:600}
.tt-page-header-info .tt-breadcrumb .breadcrumb-item a:hover,.tt-page-header-info .tt-breadcrumb .breadcrumb-item a:focus{color:#fff!important;text-decoration:underline}
.tt-page-header-info .tt-breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.7)!important}

/* Security Settings: the linked accounts table fits its card instead of scrolling sideways */
#tableLinkedAccounts{width:100%!important}

/* MarketConnect promotions we do not sell (also taken out of the sidebars by the hook; on the service page MarketConnect adds
   them after it) */
.mc-panel-promo,.card-sidebar.mc-panel-promo{display:none!important}

/* "Recommended for you" (MarketConnect) inside a module's service page, e.g. SPanel */
.promo-container{display:none!important}

/* Every other client area page (My Details, Contacts, Security, Add Funds, Open Ticket, service and domain pages, News,
   Knowledgebase, Network Status, Affiliates) in the look of My invoices and My Products & Services (tg-invoices.css): the one
   blue of the new pages instead of the theme teal, white cards with a thin border, quiet uppercase table headers, blue focus
   rings. The new pages (.tgi, .tgd-root) keep their own rules. Colours of surfaces only in light mode: in dark mode
   (data-bs-theme="dark" on <html>) the theme's own dark surfaces stay. */
#main-body .btn-primary,.modal .btn-primary{background:#1f5fa8!important;border-color:#1f5fa8!important;color:#fff!important;border-radius:10px;font-weight:600}
#main-body .btn-primary:hover,#main-body .btn-primary:focus,.modal .btn-primary:hover{background:#184d8a!important;border-color:#184d8a!important}
#main-body .btn-primary:focus,.primary-content .form-control:focus,.primary-content .custom-select:focus{box-shadow:0 0 0 3px rgba(31,95,168,.22)}
.primary-content .form-control:focus,.primary-content .custom-select:focus{border-color:#1f5fa8}
.primary-content .form-control,.primary-content .custom-select,.primary-content .btn-default,.primary-content .btn-secondary,.primary-content .btn-light,
.primary-content .btn-outline-primary,.primary-content .btn-success,.primary-content .btn-danger{border-radius:10px}
.primary-content .btn-default,.primary-content .btn-secondary,.primary-content .btn-light,.primary-content .btn-outline-primary{font-weight:600}
.primary-content .btn-success{background:#2e9e4f;border-color:#2e9e4f;font-weight:600}
.primary-content .page-item.active .page-link{background:#1f5fa8;border-color:#1f5fa8}
.primary-content .page-link,.primary-content a:not([class]):not(.tgi a):not(.tgd-root a){color:#1f5fa8}
.primary-content .nav-tabs .nav-link.active,.primary-content .nav-pills .nav-link.active{color:#1f5fa8;border-bottom-color:#1f5fa8}
.primary-content .label,.primary-content .badge,.primary-content .status{border-radius:999px;font-weight:700}
.primary-content .alert{border-radius:12px}
.primary-content .card:not(.tgi-card):not(.tgi .card):not(.tgd-root .card),.sidebar .card,.secondary-sidebar .card,.primary-content .table-container{border-radius:14px!important}
.sidebar .card .list-group-item:last-child{border-radius:0 0 14px 14px}
.primary-content .card-header,.sidebar .card-header{border-radius:14px 14px 0 0!important}
.primary-content .card-footer{border-radius:0 0 14px 14px!important}
.primary-content .card-title{font-weight:800}

:root:not([data-bs-theme="dark"]) .primary-content .card:not(.tgi-card):not(.tgi .card):not(.tgd-root .card),
:root:not([data-bs-theme="dark"]) .sidebar .card,:root:not([data-bs-theme="dark"]) .secondary-sidebar .card,
:root:not([data-bs-theme="dark"]) .primary-content .table-container{background:#fff!important;border:1px solid #e3e8ef!important;
  box-shadow:0 1px 2px rgba(16,36,62,.06),0 6px 20px rgba(16,36,62,.06)!important}
:root:not([data-bs-theme="dark"]) .primary-content .card-title,:root:not([data-bs-theme="dark"]) .sidebar .card-header,
:root:not([data-bs-theme="dark"]) .primary-content label{color:#10243e}
:root:not([data-bs-theme="dark"]) .primary-content .card-header,:root:not([data-bs-theme="dark"]) .sidebar .card-header{background:#fff;border-bottom:1px solid #e3e8ef}
:root:not([data-bs-theme="dark"]) .primary-content .card-footer{background:#f8fafc;border-top:1px solid #e3e8ef}
:root:not([data-bs-theme="dark"]) .sidebar .list-group-item{border-color:#e3e8ef}
:root:not([data-bs-theme="dark"]) .sidebar .list-group-item:not(.active):hover{background:#e9f1fb;color:#10243e}
:root:not([data-bs-theme="dark"]) .primary-content .form-control,:root:not([data-bs-theme="dark"]) .primary-content .custom-select{border-color:#d3dce7;color:#10243e}
:root:not([data-bs-theme="dark"]) .primary-content .form-control[disabled],:root:not([data-bs-theme="dark"]) .primary-content .form-control[readonly]{background:#f8fafc;color:#5b6b7f}
:root:not([data-bs-theme="dark"]) .primary-content .btn-default,:root:not([data-bs-theme="dark"]) .primary-content .btn-secondary,
:root:not([data-bs-theme="dark"]) .primary-content .btn-light,:root:not([data-bs-theme="dark"]) .primary-content .btn-outline-primary{background:#fff;border:1px solid #d3dce7;color:#10243e}
:root:not([data-bs-theme="dark"]) .primary-content .btn-default:hover,:root:not([data-bs-theme="dark"]) .primary-content .btn-secondary:hover,
:root:not([data-bs-theme="dark"]) .primary-content .btn-light:hover,:root:not([data-bs-theme="dark"]) .primary-content .btn-outline-primary:hover{background:#f8fafc;border-color:#b9c6d6}
:root:not([data-bs-theme="dark"]) .primary-content table.table thead th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6b7f;
  background:#f8fafc;border-top:0;border-bottom:1px solid #e3e8ef!important;white-space:nowrap}
:root:not([data-bs-theme="dark"]) .primary-content table.table td{border-color:#e3e8ef}
:root:not([data-bs-theme="dark"]) .primary-content .alert-info{background:#e9f1fb;border-color:#d6e5f7;color:#10243e}
:root:not([data-bs-theme="dark"]) .primary-content .nav-pills .nav-link.active{background:#e9f1fb}

/* dark mode: form labels, card titles and sidebar rows were dark text on the dark page (unreadable on My Details, Contacts ...) */
[data-bs-theme="dark"] .primary-content label,[data-bs-theme="dark"] .primary-content .col-form-label,[data-bs-theme="dark"] .primary-content .card-title,
[data-bs-theme="dark"] .sidebar .card-header{color:#dbe4ee!important}
[data-bs-theme="dark"] #main-body .sidebar .list-group-item:not(.active){background:transparent!important;color:#dbe4ee!important;border-color:rgba(255,255,255,.1)!important}
[data-bs-theme="dark"] #main-body .sidebar .list-group-item:not(.active):hover{background:rgba(255,255,255,.06)!important}
[data-bs-theme="dark"] .primary-content .alert-info{background:rgba(31,95,168,.22);border-color:rgba(122,170,230,.35);color:#dbe4ee}

/* page header, desktop: the breadcrumb is a tab joined to the page below. In light mode its box was see-through (navy) beside a
   white triangle (owner's screenshot, 31 October 2026); box and triangle now take the page colour, with dark text, as dark mode does */
@media (min-width:992px){
  html:not([data-bs-theme="dark"]) .tt-page-header .tt-breadcrumb{background:#f5f7fa!important}
  html:not([data-bs-theme="dark"]) .tt-page-header .tt-triangle-right{border-bottom-color:#f5f7fa!important}
  html:not([data-bs-theme="dark"]) .tt-page-header-info .tt-breadcrumb .breadcrumb-item,
  html:not([data-bs-theme="dark"]) .tt-page-header-info .tt-breadcrumb .breadcrumb-item.active{color:#0d2b45!important}
  html:not([data-bs-theme="dark"]) .tt-page-header-info .tt-breadcrumb .breadcrumb-item a{color:#1f5fa8!important}
  html:not([data-bs-theme="dark"]) .tt-page-header-info .tt-breadcrumb .breadcrumb-item a:hover,
  html:not([data-bs-theme="dark"]) .tt-page-header-info .tt-breadcrumb .breadcrumb-item a:focus{color:#0d2b45!important}
  html:not([data-bs-theme="dark"]) .tt-page-header-info .tt-breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:#6b7a8c!important}
}