:root{
        --text:#222;
        --muted:#6b7280;
        --border:#d7dde5;
        --panel:#ffffff;
        --bg:#f6f8fb;
        --green:#1f7a3f;
        --green-2:#2fa44f;
        --shadow: 0 1px 2px rgba(0,0,0,.05);
        --radius:10px;
        --radius-sm:8px;
      }
      *{box-sizing:border-box}
      body{
        margin:0;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
        background:var(--bg);
        color:var(--text);
      }
      .page{
        max-width: 1280px;
        margin: 0 auto;
        padding: 18px 22px 28px;
      }

      .topbar{
        margin-top: 50px;
        display:flex;
        align-items:center;
        gap:12px;
        margin-bottom: 18px;
      }
      .back{
        width:34px;height:34px;
        border:1px solid var(--border);
        background:#fff;
        border-radius: 50%;
        display:grid; place-items:center;
        cursor:pointer;
      }
      .title{
        font-size: 28px;
        font-weight: 650;
        letter-spacing: .2px;
      }

      .customer-row{
        display:flex;
        align-items:flex-start;
        gap:14px;
        margin: 14px 0 18px;
      }
      .field{
        display:flex;
        flex-direction:column;
        gap:6px;
        min-width: 420px;
      }
      label{
        font-size: 13px;
        color: var(--muted);
      }
      .control{
        display:flex;
        align-items:center;
        border:1px solid var(--border);
        background:#fff;
        border-radius: var(--radius-sm);
        height: 38px;
        overflow:hidden;
      }
      .control input, .control select{
        border:0;
        outline:0;
        height:100%;
        padding: 0 12px;
        font-size: 14px;
        width:100%;
        background:transparent;
      }
      .control .addon{
        width:42px;
        height:100%;
        border-left:1px solid var(--border);
        display:grid;
        place-items:center;
        color:#555;
        background:#fff;
      }

      .action-stack{
        display:flex;
        flex-direction:column;
        gap:6px;
        padding-top: 20px;
      }
      .btn-outline{
        height: 38px;
        padding: 0 14px;
        border-radius: var(--radius-sm);
        border:2px solid var(--green-2);
        background:#fff;
        color: var(--green);
        font-weight: 650;
        cursor:pointer;
        white-space:nowrap;
      }
      .helper{
        font-size: 12px;
        color: var(--muted);
      }
      .helper a{ color: #2b6fd6; text-decoration:none; }
      .helper a:hover{ text-decoration:underline; }

      .main-grid{
        margin-top: 50px;
        display:grid;
        grid-template-columns: 1.8fr 1fr;
        gap: 18px;
        align-items:start;
      }
      .panel{
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
      }
      .panel-hd{
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        font-weight: 650;
      }
      .panel-bd{
        padding: 16px;
      }

      .rc-grid{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .radio-block{
        display:flex;
        gap:10px;
        align-items:flex-start;
        padding: 10px 10px;
        border-radius: 10px;
      }
      .radio-block input{ margin-top: 2px; }
      .radio-title{
        font-weight: 650;
        display:flex;
        align-items:center;
        gap:8px;
      }
      .radio-sub{
        font-size: 12px;
        color: var(--muted);
        margin-top: 2px;
      }
      .info-dot{
        width:18px;height:18px;
        border-radius:50%;
        border:1px solid var(--border);
        display:grid; place-items:center;
        font-size: 12px;
        color:#666;
      }

      .form-grid{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 10px;
      }

      .icons-row{
        display:flex;
        gap:8px;
        margin-top: 10px;
        align-items:center;
        color:#666;
      }
      .chip{
        border:1px solid var(--border);
        border-radius: 6px;
        padding: 4px 7px;
        font-size: 11px;
        background:#fff;
      }

      .amount-row .control{
        height: 40px;
      }

      .section{
        margin-top: 50px;
      }
      .section-title{
        font-size: 20px;
        font-weight: 650;
        margin: 8px 0 10px;
      }
      .toolbar{
        display:flex;
        align-items:center;
        gap:10px;
        padding: 0 2px 10px;
      }
      .toolbar .search{
        width: 220px;
      }
      .btn-filter{
        height: 34px;
        padding: 0 12px;
        border-radius: 8px;
        border: 2px solid var(--green-2);
        background:#fff;
        color: var(--green);
        font-weight:650;
        cursor:pointer;
        display:flex;
        align-items:center;
        gap:8px;
      }
      .toolbar .pill{
        margin-left: 8px;
        font-size: 14px;
        color: var(--muted);
      }

      table{
        width:100%;
        border-collapse: collapse;
        background:#fff;
      }
      thead th{
        text-align:left;
        font-size: 12px;
        color: var(--muted);
        font-weight: 650;
        padding: 12px 12px;
        border-bottom: 1px solid var(--border);
      }
      tbody td{
        padding: 14px 12px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        font-size: 14px;
      }
      .checkcell{
        width:40px;
      }
      .inv a{
        color:#6b3fd6;
        text-decoration:none;
        font-weight: 650;
      }
      .inv a:hover{ text-decoration:underline; }
      .right{
        text-align:right;
        white-space:nowrap;
      }

      .footer{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding: 18px 2px 0;
      }
      .link-btn{
        border:0;
        background:transparent;
        color: var(--green);
        font-weight:650;
        cursor:pointer;
      }

      @media (max-width: 980px){
        .main-grid{ grid-template-columns: 1fr; }
        .field{ min-width: 0; flex:1; }
        .customer-row{ flex-direction: column; }
        .action-stack{ padding-top: 0; }
        .rc-grid{ grid-template-columns: 1fr; }
        .form-grid{ grid-template-columns: 1fr; }
      }
        .btn-primary{
        height: 40px;
        padding: 0 18px;
        border-radius: 10px;
        border: none;
        background: var(--green-2);
        color: #fff;
        font-weight: 650;
        font-size: 14px;
        cursor: pointer;
        }
        .btn-primary:hover{
        background: #248a42;
        }
        .btn-primary:active{
        transform: translateY(1px);
        }

        .amount-actions{
        margin-top: 16px;
        padding-bottom: 24px; /* creates white space under the button */
        display: flex;
        justify-content: center;
        }

.notes-control {
  height: auto;           /* remove fixed 38px height */
  align-items: stretch;
}

.notes-control textarea {
  resize: vertical;
  padding: 10px 12px;
  font-size: 14px;
  border: 0;
  outline: 0;
  width: 100%;
  min-height: 90px;
  font-family: inherit;
  background: transparent;
}