/* Tech Guru client area redesign (31 October 2026). Loaded by includes/hooks/tg_ca.php for the visitors the gate lets in
   (setting TgCaRedesign), with html.tgca on the page. One look for every page, from the approved dashboard and My invoices
   tokens (css/tg-ca-dashboard.css, css/tg-invoices.css). It only restyles the theme's own markup: the pages built by
   tg-invoices / tg-services / tg-lists (.tgi) and the dashboard (.tgd-root) keep their own styles.
   Touch: controls are at least 44 px high. Dark mode: the site's own switch (html[data-bs-theme="dark"]). */
html.tgca{--ca-bg:#f2f5f9;--ca-surface:#fff;--ca-surface-2:#f8fafc;--ca-ink:#10243e;--ca-text:#1f2a37;--ca-muted:#5b6b7f;--ca-line:#e3e8ef;--ca-line-2:#d3dce7;
  --ca-blue:#1f5fa8;--ca-blue-600:#184d8a;--ca-blue-50:#e9f1fb;--ca-green:#137a43;--ca-green-50:#e5f4eb;--ca-amber:#8a4b00;--ca-amber-50:#fff2d9;
  --ca-red:#b42318;--ca-red-50:#fdeceb;--ca-grey:#4f5d6e;--ca-grey-50:#edf1f5;--ca-violet:#5a3db0;--ca-violet-50:#efeafc;
  --ca-radius:14px;--ca-radius-sm:10px;--ca-shadow:0 1px 2px rgba(16,36,62,.06),0 6px 20px rgba(16,36,62,.06);--ca-focus:#1f5fa8}
html.tgca[data-bs-theme="dark"]{--ca-bg:#0b1220;--ca-surface:#111a2b;--ca-surface-2:#16213a;--ca-ink:#eef3fb;--ca-text:#d5deea;--ca-muted:#9fb0c6;--ca-line:#24324a;--ca-line-2:#30415f;
  --ca-blue:#7fb0f0;--ca-blue-600:#a3c6f5;--ca-blue-50:#16294a;--ca-green:#6fd39b;--ca-green-50:#123524;--ca-amber:#f3c27a;--ca-amber-50:#3a2a10;
  --ca-red:#ff9b92;--ca-red-50:#3d1714;--ca-grey:#b4c0d0;--ca-grey-50:#1d2940;--ca-violet:#c3b2ff;--ca-violet-50:#251c45;--ca-shadow:0 1px 2px rgba(0,0,0,.4);--ca-focus:#7fb0f0}

/* ---------- page ---------- */
html.tgca body #main-body{background:var(--ca-bg);color:var(--ca-text)}
html.tgca #main-body .primary-content{min-width:0}
html.tgca #main-body :focus-visible{outline:3px solid var(--ca-focus);outline-offset:2px}
html.tgca .tt-page-header h1{font-family:Manrope,Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
html.tgca .tt-breadcrumb{overflow-wrap:anywhere}

/* ---------- cards (not the redesigned list pages and dashboard) ---------- */
html.tgca #main-body .card:not(.tgi .card):not(.tgd-root .card){background:var(--ca-surface);border:1px solid var(--ca-line);border-radius:var(--ca-radius);box-shadow:var(--ca-shadow);color:var(--ca-text)}
html.tgca #main-body .card:not(.tgi .card):not(.tgd-root .card)>.card-header{background:transparent;border-bottom:1px solid var(--ca-line);border-radius:var(--ca-radius) var(--ca-radius) 0 0;padding:14px 18px}
html.tgca #main-body .card .card-title,html.tgca #main-body .card h3,html.tgca #main-body .card h4,html.tgca #main-body .card h5{color:var(--ca-ink)}
html.tgca #main-body .card>.card-footer{background:var(--ca-surface-2);border-top:1px solid var(--ca-line);border-radius:0 0 var(--ca-radius) var(--ca-radius)}
html.tgca #main-body .card .card-body{overflow-wrap:anywhere}
html.tgca #main-body .bg-gray-light,html.tgca #main-body .bg-primary-light{background:var(--ca-surface-2)!important}

/* ---------- sidebar ---------- */
html.tgca .sidebar .card-sidebar{border-radius:var(--ca-radius);overflow:hidden}
html.tgca .sidebar .card-sidebar .card-title{font:700 15px/1.3 Manrope,Inter,sans-serif}
html.tgca .sidebar .card-sidebar,html.tgca .sidebar .card-sidebar>.card-header,html.tgca .sidebar .card-sidebar .collapsable-card-body{background:var(--ca-surface)!important;color:var(--ca-text)}
html.tgca .sidebar .card-sidebar .card-title,html.tgca .sidebar .card-sidebar .card-title i,html.tgca .sidebar .card-sidebar .card-header .card-minimise{color:var(--ca-ink)!important}
html.tgca .sidebar .list-group-item:not(.hidden):not(.w-hidden):not(.d-none):not([hidden]){display:flex;align-items:center;min-height:44px;padding:10px 16px;border-color:var(--ca-line);background:var(--ca-surface);color:var(--ca-text);overflow-wrap:anywhere}
html.tgca .sidebar .list-group-item:hover{background:var(--ca-blue-50);color:var(--ca-blue)}
html.tgca .sidebar .list-group-item.active{background:var(--ca-blue)!important;border-color:var(--ca-blue)!important;color:#fff!important}
html.tgca .sidebar .list-group-item .sidebar-menu-item-wrapper{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
html.tgca .sidebar .list-group-item .sidebar-menu-item-label{min-width:0;flex:1}
html.tgca .sidebar .card-footer .btn{min-height:44px}
/* MarketConnect products we do not sell (tg_ca_services.php takes them out by name; these cards come from the module) */
html.tgca .sidebar .tgca-hide,html.tgca .tgca-hide{display:none!important}

/* ---------- buttons ---------- */
html.tgca #main-body .btn:not(.tgi .btn):not(.tgd-root .btn):not(.tgi-btn){border-radius:var(--ca-radius-sm);font-weight:600;min-height:44px;min-width:44px}
html.tgca #main-body .btn:not(.tgi .btn):not(.tgd-root .btn):not(.tgi-btn):not(.hidden):not(.w-hidden):not(.d-none):not([hidden]){display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:normal;text-align:center}
html.tgca #main-body .btn.btn-block:not(.hidden):not(.w-hidden):not(.d-none):not([hidden]){display:flex;width:100%}
html.tgca #main-body .btn-primary:not(.tgi .btn){background:var(--ca-blue);border-color:var(--ca-blue);color:#fff}
html.tgca #main-body .btn-primary:not(.tgi .btn):hover{background:var(--ca-blue-600);border-color:var(--ca-blue-600)}
html.tgca #main-body .btn-default:not(.tgi .btn),html.tgca #main-body .btn-light:not(.tgi .btn){background:var(--ca-surface);border:1px solid var(--ca-line-2);color:var(--ca-ink)}
html.tgca #main-body .btn-default:not(.tgi .btn):hover{border-color:var(--ca-blue);color:var(--ca-blue)}
html.tgca #main-body .btn-sm:not(.tgi .btn),html.tgca #main-body .btn-xs:not(.tgi .btn){min-height:44px}
@media (pointer:coarse),(max-width:991.98px){html.tgca #main-body .btn:not(.tgi .btn):not(.tgd-root .btn),html.tgca #main-body .btn-sm:not(.tgi .btn),html.tgca #main-body .btn-xs:not(.tgi .btn){min-height:44px;height:auto;min-width:44px}
  html.tgca #main-body .btn-toolbar,html.tgca #main-body .md-header{flex-wrap:wrap;gap:4px}}

/* ---------- forms ---------- */
html.tgca #main-body .form-control:not(.tgi .form-control),html.tgca #main-body .custom-select{border-radius:var(--ca-radius-sm);border:1px solid var(--ca-line-2);min-height:44px;background-color:var(--ca-surface);color:var(--ca-text)}
html.tgca #main-body textarea.form-control{min-height:120px}
html.tgca #main-body .form-control:focus,html.tgca #main-body .custom-select:focus{border-color:var(--ca-blue);box-shadow:0 0 0 3px var(--ca-blue-50)}
html.tgca #main-body label,html.tgca #main-body .col-form-label{font-weight:600;color:var(--ca-ink)}
html.tgca #main-body .form-text,html.tgca #main-body .text-muted{color:var(--ca-muted)!important}
html.tgca #main-body .input-group>.form-control{min-width:0}
html.tgca #main-body .tgca-formbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-start;margin-top:16px}
html.tgca #main-body .tgca-formbar .btn{min-width:120px}

/* ---------- alerts ---------- */
html.tgca #main-body .alert{border-radius:var(--ca-radius-sm);border-width:1px;overflow-wrap:anywhere}
html.tgca #main-body .alert-info{background:var(--ca-blue-50);border-color:var(--ca-line-2);color:var(--ca-ink)}
html.tgca #main-body .alert-warning{background:var(--ca-amber-50);border-color:#f0d9a8;color:var(--ca-amber)}
html.tgca #main-body .alert-danger{background:var(--ca-red-50);border-color:#f3c3be;color:var(--ca-red)}
html.tgca #main-body .alert-success{background:var(--ca-green-50);border-color:#bfe3cc;color:var(--ca-green)}

/* ---------- tables (not the redesigned lists) ---------- */
html.tgca #main-body .tgca-tscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;border-radius:var(--ca-radius-sm)}
html.tgca #main-body table.table:not(.tgi table){color:var(--ca-text)}
html.tgca #main-body table.table:not(.tgi table) th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ca-muted);border-top:0;background:var(--ca-surface-2)}
html.tgca #main-body table.table:not(.tgi table) td{vertical-align:middle;border-color:var(--ca-line)}

/* ---------- tabs ---------- */
html.tgca #main-body .nav-tabs{border-bottom:1px solid var(--ca-line);gap:4px;flex-wrap:wrap}
html.tgca #main-body .nav-tabs .nav-link{border:0;border-bottom:3px solid transparent;color:var(--ca-muted);font-weight:600;min-height:44px}
html.tgca #main-body .nav-tabs .nav-link:not(.hidden):not(.w-hidden):not(.d-none):not([hidden]){display:flex;align-items:center;gap:6px;background:transparent}
html.tgca #main-body .nav-tabs .nav-link.active{color:var(--ca-blue);border-bottom-color:var(--ca-blue);background:transparent}
html.tgca #main-body .tab-content.bg-white,html.tgca #main-body .product-details-tab-container{background:var(--ca-surface)!important;border:1px solid var(--ca-line);border-top:0;border-radius:0 0 var(--ca-radius) var(--ca-radius)}

/* ---------- head card: service and domain ---------- */
html.tgca .tgca-head{background:var(--ca-surface);border:1px solid var(--ca-line);border-radius:var(--ca-radius);box-shadow:var(--ca-shadow);padding:18px 20px;margin-bottom:20px;color:var(--ca-text)}
html.tgca .tgca-head-top{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
html.tgca .tgca-avatar{width:44px;height:44px;border-radius:12px;background:var(--ca-blue-50);color:var(--ca-blue);display:grid;place-items:center;font:800 15px/1 Manrope,Inter,sans-serif;flex:none}
html.tgca .tgca-head-t{flex:1 1 220px;min-width:0}
html.tgca .tgca-head-t h2{font:800 20px/1.25 Manrope,Inter,sans-serif;color:var(--ca-ink);margin:0 0 4px;overflow-wrap:anywhere}
html.tgca .tgca-head-t p{margin:0;color:var(--ca-muted);font-size:14px;overflow-wrap:anywhere}
html.tgca .tgca-head-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
html.tgca .tgca-pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap}
html.tgca .tgca-pill:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
html.tgca .tgca-pill-active{background:var(--ca-green-50);color:var(--ca-green)}
html.tgca .tgca-pill-pending{background:var(--ca-amber-50);color:var(--ca-amber)}
html.tgca .tgca-pill-suspended,html.tgca .tgca-pill-bad{background:var(--ca-red-50);color:var(--ca-red)}
html.tgca .tgca-pill-ended{background:var(--ca-grey-50);color:var(--ca-grey)}
html.tgca .tgca-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:16px 0 0;padding:0}
html.tgca .tgca-fact{background:var(--ca-surface-2);border:1px solid var(--ca-line);border-radius:var(--ca-radius-sm);padding:10px 14px;min-width:0}
html.tgca .tgca-fact dt,html.tgca .tgca-fact h4,html.tgca .tgca-fact h5{font:600 12px/1.3 Inter,system-ui,sans-serif!important;text-transform:uppercase;letter-spacing:.04em;color:var(--ca-muted)!important;margin:0 0 4px!important}
html.tgca .tgca-fact dd,html.tgca .tgca-fact p,html.tgca .tgca-fact>div{font-size:15px;font-weight:600;color:var(--ca-ink);margin:0!important;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
html.tgca .tgca-fact .tgca-hint{display:block;font-size:12px;font-weight:600;color:var(--ca-muted);margin-top:2px}
html.tgca .tgca-fact .tgca-hint.warn{color:var(--ca-amber)}
html.tgca .tgca-fact .tgca-hint.bad{color:var(--ca-red)}
/* the Actions button (the menu itself is TGIMenu from tg-invoices.js) */
html.tgca .tgca-act-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:120px;padding:8px 16px;border-radius:var(--ca-radius-sm);border:1px solid var(--ca-line-2);background:var(--ca-surface);color:var(--ca-ink);font-weight:700;font-size:14px;cursor:pointer}
html.tgca .tgca-act-btn:hover{border-color:var(--ca-blue);color:var(--ca-blue)}
html.tgca .tgca-act-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
/* the theme's overview card under the head: label and value tiles instead of a long column */
html.tgca .tgca-ov .product-status,html.tgca .tgca-ov .product-actions-wrapper{display:none!important}
html.tgca .tgca-ov .tgca-ov-facts{flex:0 0 100%;max-width:100%}
html.tgca .tgca-ov .tgca-ov-empty{display:none!important}

/* ---------- ticket view ---------- */
html.tgca .view-ticket .ticket-reply{border:1px solid var(--ca-line);border-radius:var(--ca-radius);margin-bottom:14px;overflow:hidden;background:var(--ca-surface)}
html.tgca .view-ticket .ticket-reply.staff{border-left:4px solid var(--ca-blue)}
html.tgca .view-ticket .ticket-reply:not(.staff){border-left:4px solid var(--ca-green)}
html.tgca .view-ticket .ticket-reply .posted-by{background:var(--ca-surface-2);padding:10px 14px;border-bottom:1px solid var(--ca-line);color:var(--ca-muted);font-size:13px;overflow-wrap:anywhere}
html.tgca .view-ticket .ticket-reply .message{overflow-wrap:anywhere;color:var(--ca-text)}
html.tgca .view-ticket .ticket-reply .message img{max-width:100%;height:auto}
html.tgca .view-ticket .ticket-reply .message pre,html.tgca .view-ticket .ticket-reply .message table{max-width:100%;overflow-x:auto;display:block}
html.tgca .view-ticket>.card-body:first-child:not(.hidden):not(.w-hidden):not(.d-none):not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:10px}
html.tgca .view-ticket>.card-body:first-child h3{flex:1 1 200px;margin:0;overflow-wrap:anywhere}
html.tgca .tgca-hidden-orig{display:none!important}

/* ---------- sign in, register, password reset ---------- */
html.tgca .login-form,html.tgca .tt-login-form,html.tgca .card.mw-540{border-radius:var(--ca-radius)!important}
html.tgca #main-body .login-form .btn,html.tgca #main-body .tgauth-btn{min-height:44px}

/* ---------- phones ---------- */
@media (max-width:575.98px){
  html.tgca .tgca-head{padding:14px}
  html.tgca .tgca-head-side{margin-left:0;width:100%;justify-content:space-between}
  html.tgca .tgca-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.tgca .tgca-act-btn{min-width:0;flex:0 0 auto}
  html.tgca #main-body .card:not(.tgi .card) .card-body{padding:14px}
}
@media (max-width:359.98px){html.tgca .tgca-facts{grid-template-columns:1fr}}
@media print{html.tgca .tgca-act-btn{display:none}}

/* My invoices (tg-invoices.css, approved): a long purpose line wraps instead of widening a 320 px phone (long-data audit, 31 Oct 2026) */
html.tgca .tgi .tgi-doc-sum,html.tgca .tgi .tgi-doc-sum *{overflow-wrap:anywhere;min-width:0}

/* page header on touch tablets in landscape: the breadcrumb (44 px links on touch, css/tg-ca-fixes.css) sits under the title,
   as tg-ca-fixes.css already does up to 991 px, so a title on two lines never runs under it (WebKit iPad audit, 31 Oct 2026) */
@media (pointer:coarse) and (max-width:1399.98px){html.tgca .tt-page-header-info .tt-breadcrumb{position:static!important;margin-top:10px}}

/* header for signed-out visitors: Register and Login were inline links whose padding spilled 4 px out of their list items, so at
   320 px they overlapped (WebKit audit, 31 Oct 2026); as inline boxes each item holds its own padding */
html.tgca .tt-secondary-list>.nav-item>a.btn-sm{display:inline-flex;align-items:center;gap:4px}
/* under 360 px the two become 44 px icon buttons (the words stay for screen readers), so the header row still fits 320 px */
@media (max-width:359.98px){
  html.tgca .tt-secondary-list>.nav-item>a.btn-sm{position:relative;overflow:hidden;min-width:44px;min-height:44px;justify-content:center;padding:4px}
  html.tgca .tt-secondary-list>.nav-item>a.btn-sm>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* phones: the Actions button sits right after the status pill, away from the WhatsApp button fixed at the bottom right */
@media (max-width:575.98px){html.tgca .tgca-head-side{justify-content:flex-start}}

/* My invoices (2 November 2026): crore amounts and long dates never run into each other; documents that fit keep their look.
   Phones: a row whose amount and status, or date and due date, do not fit side by side is stacked in one column by tg-ca.js
   (.tgca-stack). Wider screens: when two columns' text would touch, the columns take their content's width (.tgca-fit) and,
   if the table is still too wide, long dates may wrap (.tgca-fit2) */
@container tgi (max-width:859px){
  html.tgca #tgi .tgi-tbl tbody tr.tgca-stack{grid-template-columns:minmax(0,1fr);grid-template-areas:"doc" "amt" "st" "date" "due" "act"}
  html.tgca #tgi .tgi-tbl tbody tr.tgca-stack td{min-width:0;overflow-wrap:anywhere;text-align:left}
}
@container tgi (min-width:860px){
  html.tgca #tgi table.tgi-tbl.tgca-fit{table-layout:auto}
  html.tgca #tgi table.tgi-tbl.tgca-fit2 .tgi-date{white-space:normal}
}