:root {
     --brand-1: #2FC3A3;
     --brand-2: #2BAE66;

     --soft-border: rgba(0, 0, 0, .06);
     --text-dark: #0f172a;

     /* scope colors */
     --s1: #ef4444;
     --s2: #22c55e;
     --s3: #a855f7;

     --s1-bg: rgba(247, 138, 138, 0.58);
     --s2-bg: rgba(34, 197, 94, .08);
     --s3-bg: rgba(168, 85, 247, .08);
 }

 .btn-primary {
     background-color: #0a773b;
     border: 1px solid #2FC3A3;
 }

 .btn-primary:hover {
     background-color: #3f9207;
     border: 1px solid #2FC3A3;
 }

 /* Container: mobile-friendly */
 .container {
     max-width: 1240px;
 }

 @media (max-width: 576px) {
     .container {
         padding-left: 14px !important;
         padding-right: 14px !important;
     }
 }

 /* Header */
 .brand-title {
     font-weight: 900;
     font-size: 26px;
     line-height: 1;
     color: #0a773b;
 }

 .brand-sub {
     font-weight: 700;
     font-size: 13px;
     opacity: .9;
     color: #0a773b;
 }

 @media (max-width: 576px) {
     .brand-title {
         font-size: 20px;
     }

     .brand-sub {
         font-size: 12px;
     }
 }

 /* Live count */
 .text-right {
     text-align: right;
 }

 @media (max-width: 576px) {
     .text-right {
         text-align: left;
     }
 }

 .pulse {
     animation: pulse 0.6s ease-in-out;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
         opacity: .7;
     }

     50% {
         transform: scale(1.06);
         opacity: 1;
     }

     100% {
         transform: scale(1);
         opacity: .9;
     }
 }

 /* Meta Card */
 .card-soft {
     border: 1px solid var(--soft-border);
     box-shadow: 0 10px 26px rgba(0, 0, 0, .04);
     overflow: hidden;
     background: #fff;

 }

 .card-soft .card-header {
     background: linear-gradient(90deg, rgba(47, 195, 163, .18), rgba(43, 174, 102, .12));
     border-bottom: 1px solid var(--soft-border);
     font-weight: 800;
     color: var(--text-dark);
 }

 /* Hero/Summary */
 .hero-wrap {
     background: var(--brand-1);
     color: #fff;
     padding: 10px;

     box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
     position: relative;
     overflow: hidden;
 }

 .summary-panel {

     padding: 2px;


 }

 .summary-card {

     padding: 12px;
     min-height: 90px;
     border-radius: 10px;
 }

 .summary-card .label {
     color: rgba(15, 23, 42, .75);
     font-weight: 800;
     font-size: 12px;
 }

 .summary-card .value {
     font-weight: 900;
     font-size: 15px;
     color: var(--text-dark);
     margin-top: 4px;
 }

 .summary-card .sub {
     color: rgba(15, 23, 42, .55);
     font-weight: 700;
     font-size: 12px;
 }

 /* Scope-based summary styling */
 .summary-card.scope-1 {
     border-color: rgba(239, 68, 68, .28);
     background: #ffcecb;
 }

 .summary-card.scope-2 {
     border-color: rgba(25, 118, 210, .28);
     background: #c4e1ff;
 }

 .summary-card.scope-3 {
     border-color: rgba(56, 142, 60, .28);
     background: #dbffd6;
 }

 .summary-card.scope-total {
     border-color: rgba(34, 197, 94, .35);
     background: #fff8c3;
     color: white;
 }

 /* Stepper */
 .stepper-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 10px 0 6px;
 }

 .stepper-center {
     flex: 0 0 420px;
     text-align: center;
 }

 .progress {
     height: 10px;
     width: 360px;

     background: rgba(0, 0, 0, .10);
     overflow: hidden;
 }

 .progress-bar {

     background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
 }

 @media (max-width: 768px) {
     .stepper-center {
         flex: 1 1 auto;
     }

     .progress {
         width: 220px;
     }
 }

 @media (max-width: 576px) {
     .stepper-bar {
         flex-direction: column;
         align-items: stretch;
         gap: 10px;
     }

     .stepper-center {
         order: 1;
     }

     #btnPrevTop {
         order: 2;
         width: 100%;
     }

     #btnNextTop {
         order: 3;
         width: 100%;
     }

     .progress {
         width: 100%;
     }
 }

 /* Tabs */
 .tabs-row {
     display: flex;
     gap: 8px;
     overflow-x: auto;
     padding: 8px 2px 10px;
     border-bottom: 1px solid var(--soft-border);
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
 }

 .tabs-row::-webkit-scrollbar {
     display: none;
 }

 .tab-pill {
     flex: 0 0 auto;
     padding: 7px 10px;

     font-weight: 800;
     font-size: 12px;
     color: #334155;
     border: 1px solid transparent;
     cursor: pointer;
     background: rgba(15, 23, 42, .04);
     white-space: nowrap;
 }

 .tab-pill.active {
     color: #0f5132;
     background: rgba(47, 195, 163, .14);
     border-color: rgba(47, 195, 163, .28);
 }

 @media (max-width: 576px) {
     .tab-pill {
         font-size: 11px;
         padding: 6px 10px;
     }
 }

 /* Page */
 .page-card {
     border: 1px solid rgba(47, 195, 163, .18);
     background: rgba(47, 195, 163, .06);
     box-shadow: 0 12px 30px rgba(0, 0, 0, .05);
     padding: 10px;

 }

 .section-title {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 900;
     font-size: 30px;
     margin: 6px 0 12px;
     color: #111827;
 }

 .section-icon {
     width: 44px;
     height: 44px;

     background: rgba(255, 255, 255, .65);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     border: 1px solid rgba(0, 0, 0, .05);
 }

 @media (max-width: 576px) {
     .section-title {
         font-size: 22px;
     }

     .section-icon {
         width: 36px;
         height: 36px;
         font-size: 18px;
     }
 }

 .row-box {
     background: #fff;
     border: 1px solid rgba(0, 0, 0, .06);

     padding: 12px;
 }

 /* Table mobile */
 .table-responsive {
     -webkit-overflow-scrolling: touch;
 }

 .table td,
 .table th {
     vertical-align: middle;
 }

 @media (max-width: 576px) {
     .table th {
         font-size: 12px;
     }

     .table td {
         font-size: 12px;
     }

     .form-control {
         font-size: 14px;
     }
 }

 .emission-chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 12px;

     border: 1px solid rgba(47, 195, 163, .25);
     background: rgba(47, 195, 163, .10);
     font-weight: 900;
     color: #0f5132;
     white-space: nowrap;
     font-size: 12px;
 }

 .btn-brand {
     background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
     border: 0;

     padding: 10px 16px;
     font-weight: 900;
     color: #fff;
 }

 .subtotal-card {
     background: #dff5ee;
     border: 1px solid rgba(47, 195, 163, .35);
     padding: 14px 14px 16px;
     text-align: left;
     color: #0f5132;
     box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
 }

 .subtotal-head {
     display: flex;
     align-items: center;
     gap: 10px;
     padding-bottom: 10px;
     border-bottom: 1px dashed rgba(15, 81, 50, .18);
     margin-bottom: 12px;
 }

 .subtotal-head .leaf {
     width: 34px;
     height: 34px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, .65);
     border: 1px solid rgba(0, 0, 0, .06);
     border-radius: 10px;
     font-size: 16px;
 }

 .subtotal-title {
     font-weight: 900;
     font-size: 14px;
     line-height: 1.2;
 }

 .subtotal-values {
     display: grid;
     gap: 6px;
     text-align: center;
 }

 .subtotal-kg {
     font-weight: 900;
     font-size: 26px;
     line-height: 1.05;
     color: #064e3b;
 }

 .subtotal-tonnes {
     font-weight: 800;
     font-size: 14px;
     opacity: .85;
 }

 .subtotal-card .unit {
     font-weight: 800;
     font-size: 12px;
     opacity: .9;
     margin-left: 6px;
 }

 /* Mobile polish */
 @media (max-width: 576px) {
     .subtotal-card {
         margin-top: 12px;
     }

     .subtotal-kg {
         font-size: 22px;
     }
 }

 /* Summary grid: 2 columns on mobile */
 @media (max-width: 576px) {
     .summary-grid .col-12.col-md-3 {
         flex: 0 0 50%;
         max-width: 50%;
     }
 }

 /* ✅ Mobile-only: stack each table row (Subtype on first row, fields on next row) */
 @media (max-width: 576px) {

     /* keep table scroll off on mobile for this table */
     .row-box .table-responsive {
         overflow-x: visible !important;
     }

     /* make rows look like cards */
     .row-box table.table {
         border-collapse: separate;
         border-spacing: 0 10px;
     }

     .row-box table.table thead {
         display: none;
     }

     /* hide header on mobile */

     .row-box table.table tbody tr {
         display: block;
         background: #fff;
         border: 1px solid rgba(0, 0, 0, .06);

         padding: 10px;
     }

     .row-box table.table tbody td {
         display: block;
         width: 100% !important;
         border: 0 !important;
         padding: 6px 0 !important;
     }

     /* 1) First cell = Subtype title */
     .row-box table.table tbody td:first-child {
         font-weight: 900;
         font-size: 14px;
         padding-top: 2px !important;
         padding-bottom: 8px !important;
     }

     /* 2) Second + third + fourth cells in one grid row */
     .row-box table.table tbody td:nth-child(2),
     .row-box table.table tbody td:nth-child(3),
     .row-box table.table tbody td:nth-child(4) {
         display: inline-block;
         vertical-align: middle;
     }

     /* units input */
     .row-box table.table tbody td:nth-child(2) {
         width: 58% !important;
         padding-right: 10px !important;
     }

     /* unit badge */
     .row-box table.table tbody td:nth-child(3) {
         width: 18% !important;
         text-align: left !important;
         padding-right: 8px !important;
     }

     /* emission chip */
     .row-box table.table tbody td:nth-child(4) {
         width: 100% !important;
         padding-top: 8px !important;
         /* put chip on new line */
     }

     /* make input nicer on mobile */
     .grid-units {
         font-size: 15px !important;
         padding: 10px 12px !important;

     }

     .emission-chip {
         width: 100%;
         justify-content: center;
     }
 }