/*
 * Axio Technical Debt — GitHub Integration & Maintenance (Phase 5)
 * File: assets/css/technical-debt-github-integration.css
 */
.td-gh-page {
  --gh-ink: #102b59;
  --gh-text: #405a83;
  --gh-muted: #667da2;
  --gh-blue: #0877f9;
  --gh-border: #d8e5f4;
  color: var(--gh-text);
  max-width: 1500px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.45;
}
.td-gh-page * { box-sizing: border-box; }
.td-gh-page h1, .td-gh-page h2, .td-gh-page strong { color: var(--gh-ink); }
.td-gh-page h1 {
  margin: 8px 0 0;
  font-size: clamp(2rem, 3vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 780;
}
.td-gh-page h2 {
  margin: 0 0 2px;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 760;
  letter-spacing: -.02em;
}
.td-gh-page p { margin: 0 0 7px; }
.td-gh-page code { overflow-wrap: anywhere; }

/* Breadcrumb and title */
.td-gh-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 13px;
  color: #62799b;
  font-size: 12px;
}
.td-gh-home { color: var(--gh-blue); font-size: 17px; }
.td-gh-header { margin-bottom: 16px; }
.td-gh-subtitle {
  margin: 2px 0 8px !important;
  color: #687da0;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.2;
  font-weight: 720;
  letter-spacing: -.02em;
}
.td-gh-header > p:last-child { max-width: 1150px; margin-bottom: 0; font-size: 15px; line-height: 1.45; }

/* KPI cards */
.td-gh-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 16px 0 11px;
}
.td-gh-metric {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  min-height: 100px;
  padding: 12px 14px;
  border: 1px solid var(--gh-border);
  border-radius: 7px;
}
.td-gh-metric-icon {
  display: grid;
  flex: 0 0 65px;
  place-items: center;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  font-size: 27px;
  font-weight: 800;
}
.td-gh-metric p { 
   margin: 0 0 3px; 
   font-size: 15px; 
}


.td-gh-metric strong { margin-right: 10px; font-size: 27px; line-height: 1.1; }


.td-gh-change { font-size: 15px; font-weight: 750; white-space: nowrap; }


.td-gh-metric small { display: block; margin-top: 2px; color: var(--gh-muted); font-size: 15px; }


.td-gh-good { color: #00a86b; }
.td-gh-bad { color: #ef4444; }
.td-gh-blue { border-color: #d9eaff; background: linear-gradient(110deg,#f1f8ff,#fff); }
.td-gh-blue .td-gh-metric-icon { color: #0877f9; background: #e0efff; }
.td-gh-red { border-color: #ffdddd; background: linear-gradient(110deg,#fff6f6,#fff); }
.td-gh-red .td-gh-metric-icon { color: #ef4444; background: #ffe7e7; }
.td-gh-purple { border-color: #e8dcff; background: linear-gradient(110deg,#faf5ff,#fff); }
.td-gh-purple .td-gh-metric-icon { color: #7c3aed; background: #eee2ff; }
.td-gh-green { border-color: #d4f4e5; background: linear-gradient(110deg,#f0fff8,#fff); }
.td-gh-green .td-gh-metric-icon { color: #08a86a; background: #d9f8e9; }

/* Main content layout */
.td-gh-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: start;
  gap: 24px;
}


.td-gh-left, .td-gh-right { min-width: 0; }


.td-gh-section { margin: 0 0 17px; }


.td-gh-section > p { 
   margin-bottom: 7px; 
   font-size: 15px;
}


/* Tables */
.td-gh-table-wrap { 
   border-radius: 6px;   
   border-left: 1px solid var(--gov-border);
}

.td-gh-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 11px; line-height: 1.35; }


.td-gh-table thead { background: #edf3f9; }


.td-gh-table th {
  padding: 7px 8px;
  color: var(--gh-ink);
  text-align: left;
  font-weight: 750;
  white-space: nowrap;
  border-bottom: 1px solid #d4e0ee;
  font-size: 15px !important;
}


.td-gh-table td { 
    padding: 6px 8px; 
    vertical-align: top;
    border-bottom: 1px solid #dce6f0; 
    font-size: 15px !important;
}


.td-gh-table tr:last-child td { border-bottom: 0; }
.td-gh-table th + th, .td-gh-table td + td { border-left: 1px solid #dce6f0; }
.td-gh-table tbody tr:nth-child(even) { background: #fbfdff; }


.td-gh-pill {
  display: inline-block;
  min-width: 64px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}


.td-gh-pill-low { color: #ef4444; border-color: #ffcaca; background: #fff0f0; }
.td-gh-pill-medium { color: #d97706; border-color: #ffdfaa; background: #fff7e8; }
.td-gh-pill-high { color: #059669; border-color: #b8f0d7; background: #eafff4; }
.td-gh-pill-low-blue { color: #0877f9; border-color: #b9dcff; background: #edf7ff; }

/* Findings donut chart */
.td-gh-chart-card { padding: 10px 12px 13px; border: 1px solid var(--gh-border); border-radius: 6px; }
.td-gh-chart-card > p { margin-bottom: 7px; }
.td-gh-chart-layout {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(175px, 1.1fr);
  align-items: center;
  gap: 18px;
  padding: 5px 4px 0;
}
.td-gh-donut {
  display: grid;
  place-items: center;
  width: min(100%, 174px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(#ff5b60 0 7%, #4b9cff 7% 58%, #ffb33f 58% 80%, #31c5a5 80% 94%, #9852e8 94% 100%);
}
.td-gh-donut > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  background: #fff;
}
.td-gh-donut strong { font-size: 25px; line-height: 1.15; }
.td-gh-donut span { margin-top: 2px; font-size: 11px; }
.td-gh-legend { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.td-gh-legend li { display: grid; grid-template-columns: 14px minmax(0,1fr) auto; align-items: center; gap: 8px; font-size: 11px; }
.td-gh-legend strong { font-size: 11px; font-weight: 500; white-space: nowrap; }
.td-gh-dot { width: 13px; height: 13px; border-radius: 50%; }
.td-gh-dot-red { background: #ff5b60; }
.td-gh-dot-blue { background: #4b9cff; }
.td-gh-dot-amber { background: #ffb33f; }
.td-gh-dot-green { background: #31c5a5; }
.td-gh-dot-purple { background: #9852e8; }

/* GitHub source cards */
.td-gh-sources { margin-top: 12px; }
.td-gh-source-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.td-gh-source {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #d9eaff;
  border-radius: 6px;
  background: linear-gradient(120deg,#f4f9ff,#fff);
}


.td-gh-source > span {
  display: grid;
  flex: 0 0 43px;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  color: #0877f9;
  background: #e4f1ff;
  font-size: 21px;
}


.td-gh-source strong { display: block; margin: 1px 0 2px; font-size: 11px; }
.td-gh-source p { margin: 0; font-size: 11px; line-height: 1.35; }

/* API code sample */
.td-gh-api-section { margin-top: 17px; }
.td-gh-code { overflow: hidden; border: 1px solid #243b5b; border-radius: 6px; color: #edf5ff; background: #1d2d43; }
.td-gh-code-toolbar { display: flex; align-items: center; gap: 10px; min-height: 31px; padding-right: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.td-gh-code-toolbar > span { align-self: stretch; display: grid; flex: 0 0 62px; place-items: center; color: #fff; background: #0783c7; font-size: 10px; font-weight: 800; }
.td-gh-code-toolbar code { color: #edf5ff; font-size: 10px; }
.td-gh-code-toolbar b { margin-left: auto; color: #edf5ff; font-size: 10px; white-space: nowrap; }
.td-gh-code pre { margin: 0; padding: 10px 17px; color: #edf5ff; font-size: 11px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.td-gh-code pre code { color: inherit; }

/* Benefits panel */
.td-gh-benefits { margin-top: 12px; padding: 11px 14px; border: 1px solid #bfeedd; border-radius: 6px; background: linear-gradient(120deg,#effdf7,#f7fffb); }
.td-gh-benefits h2 { display: flex; align-items: center; gap: 10px; }
.td-gh-benefits h2 > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #10b981; font-size: 15px; }
.td-gh-benefits ul { display: grid; gap: 4px; margin: 7px 0 0; padding: 0 0 0 25px; list-style: none; }
.td-gh-benefits li { position: relative; margin: 0; font-size: 12px; }
.td-gh-benefits li::before { position: absolute; left: -22px; top: 1px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; color: #fff; background: #10b981; content: "✓"; font-size: 9px; font-weight: 800; }

/* Responsive behaviour */
@media (max-width: 1150px) {
  .td-gh-layout { grid-template-columns: 1fr; }
  .td-gh-chart-layout { grid-template-columns: minmax(150px,.7fr) minmax(180px,1fr); }
}
@media (max-width: 850px) {
  .td-gh-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .td-gh-page h1 { font-size: 1.85rem; }
  .td-gh-metrics { grid-template-columns: 1fr; }
  .td-gh-metric { min-height: 86px; }
  .td-gh-table { min-width: 760px; }
  .td-gh-chart-layout { grid-template-columns: 1fr; }
  .td-gh-source-grid { grid-template-columns: 1fr; }
  .td-gh-code-toolbar code { overflow-wrap: anywhere; }
}


/* Remove default bullets */
.td-gh-benefits li {
    position: relative;
    list-style: none;
    font-size: 15px;
}

.td-gh-benefits li::before {
    content: "✓" !important;
    position: absolute;
    left: -23px;
    top: 1px;
    display: block;
    color: #10b981 !important;
    background: transparent !important;
    font-size: 15px;
    font-weight: 800;
    width: auto;
    height: auto;
    border-radius: 0;
}


.main-content ul > li::before {
    position: absolute;
    margin-left: 0;
}


/* =========================================
   Full Width Layout
========================================= */

.td-gh-layout,
.td-gh-left {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.td-gh-section {
    width: 100%;
    min-width: 0;
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--body-background-color);
}

.td-gh-section h2,
.td-gh-benefits h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
}

.td-gh-section > p {
    margin-bottom: 14px;
    line-height: 1.5;
}

/* =========================================
   Full Width Tables
========================================= */

.td-gh-table-wrap {
    width: 100%;
    max-width: 100%;
}

.td-gh-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    text-align: left;
    font-size: 15px;
}

.td-gh-table th,
.td-gh-table td {
    padding: 12px 13px;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    white-space: nowrap;
}

.td-gh-table th {
    font-weight: 700;
    background: var(--code-background-color);
}

.td-gh-table tbody tr:last-child td {
    border-bottom: none;
}

.td-gh-table tbody tr:hover {
    background: var(--sidebar-color);
}

/* =========================================
   Status Pills
========================================= */

.td-gh-pill {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
}

.td-gh-pill-low {
    color: #d65c5c;
    background: rgba(214, 92, 92, 0.12);
}

.td-gh-pill-medium {
    color: #c28b2c;
    background: rgba(194, 139, 44, 0.12);
}

.td-gh-pill-high {
    color: #159b70;
    background: rgba(21, 155, 112, 0.12);
}

.td-gh-pill-low-blue {
    color: #4388e8;
    background: rgba(67, 136, 232, 0.12);
}

/* =========================================
   Sources + Benefits Two Column Layout
========================================= */

.td-gh-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 16px;
    align-items: stretch;
    width: 100%;
    margin-top: 5px;
}



/* =========================================
   GitHub Source Cards
========================================= */

.td-gh-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.td-gh-source {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 75px;
    padding: 11px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

.td-gh-source > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 7px;
    color: #4388e8;
    background: rgba(67, 136, 232, 0.12);
    font-size: 25px;
    font-weight: 650px;
}

.td-gh-source strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 650;
    font-size: 15px;
}

.td-gh-source p {
    margin: 0;
    line-height: 1.4;
    font-size: 15px;
}

/* =========================================
   Benefits
========================================= */

.td-gh-benefits {
    display: flex;
    flex-direction: column;
}

.td-gh-benefits h2 {
    margin-bottom: 15px;
}

.td-gh-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.td-gh-benefits li {
    position: relative;
    padding-left: 23px;
    margin-bottom: 15px;
    line-height: 1.5;
}

.td-gh-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    color: #10b981;
    font-size: 15px;
    font-weight: 800;
}

/* =========================================
   Responsive Layout
========================================= */

@media (max-width: 1000px) {
    .td-gh-bottom-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(230px, 1fr);
    }

    .td-gh-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .td-gh-bottom-grid {
        grid-template-columns: 1fr;
    }

    .td-gh-source-grid {
        grid-template-columns: 1fr;
    }

    .td-gh-metrics {
        grid-template-columns: 1fr;
    }

    .td-gh-section,
    .td-gh-benefits {
        padding: 12px;
    }

    .td-gh-header h1 {
        font-size: 22px;
    }
}